水平垂直居中总结

1.1 内联元素水平居中

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>内联元素水平居中</title>
 6     <style>
 7         div {
 8             padding:10px 0;
 9             border: 2px dashed #f69c55;
10         }
11         .center-text {
12             text-align: center;/**center code**/
13         }
14     </style>
15 </head>
16 <body>
17 <p>
18     内联元素水平居中
19     利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。
20     此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。
21 </p>
22 <div class="center-text">
23     <span>inline</span><br>
24     <span style="display:inline-block;">inline-block</span><br>
25     <span style="display:inline-table;">inline-table</span><br>
26     <span style="display:inline-flex;">inline-flex</span>
27 </div>
28 </body>
29 </html>

1.2 块级元素水平居中

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>块级元素水平居中</title>
 6     <style>
 7         div {
 8             padding:10px 0;
 9             border: 2px dashed #f69c55;
10         }
11         .center-block {
12             margin: 0 auto;/**center code**/
13             width: 8rem;
14             padding:1rem;
15             color:#fff;
16             background:#000;
17         }
18     </style>
19 </head>
20 <body>
21 <p>
22     通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。
23 </p>
24 <div>
25     <p class="center-block">margin: 0 auto;</p>
26 </div>
27 </body>
28 </html>

1.3.1 多块级元素水平居中-inline-block

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>多块级元素水平居中-inline-block</title>
 6     <style>
 7         .container {
 8             padding: 8px 0;
 9             text-align: center; /**center code**/
10             border: 2px dashed #f69c55;
11         }
12         .inline-block {
13             padding: 8px;
14             width: 4rem; /**center code**/
15             margin: 0 8px;
16             color: #fff;
17             background: #000;
18             display: inline-block; /**center code**/
19         }
20     </style>
21 </head>
22 <body>
23 <p>
24     如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
25 </p>
26 <div class="container">
27 
28     <div class="inline-block">
29         简单不先于复杂
30     </div>
31     <div class="inline-block">
32         而是在复杂之后
33     </div>
34     <div class="inline-block">
35         简单不先于复杂，而是在复杂之后。
36     </div>
37 </div>
38 
39 </body>
40 </html>

1.3.2 多块级元素水平居中-flex

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>多块级元素水平居中-弹性布局</title>
 6     <style>
 7         .flex-center {
 8             padding: 8px;
 9             display: flex; /**center code**/
10             justify-content: center; /**center code**/
11             border: 2px dashed #f69c55;
12         }
13         .flex-center >div {
14             padding: 8px;
15             width: 4rem;
16             margin: 0 8px;
17             color: #fff;
18             background: #000;
19         }
20     </style>
21 </head>
22 <body>
23 <p>
24     利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
25 </p>
26 <div class="flex-center">
27     <div>
28         简单不先于复杂。
29     </div>
30     <div>
31         简单不先于复杂，而是在复杂之后。
32     </div>
33     <div>
34         而是在复杂之后。
35     </div>
36 </div>
37 </body>
38 </html>

-----------------以上水平居中----------------------------分割线-------------------------------以下垂直居中-----------------

2.1 单行内联元素垂直居中-line-height

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>单行内联元素垂直居中-line-height</title>
 6     <style>
 7         #box {
 8             height: 120px; /**center code**/
 9             line-height: 120px; /**center code**/
10             border: 2px dashed #f69c55;
11         }
12     </style>
13 </head>
14 <body>
15 <p>
16     通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。
17 </p>
18 <div id="box">
19     落霞与孤鹜齐飞，秋水共长天一色。
20 </div>
21 </body>
22 </html>

2.2.1 多行内联元素垂直居中-table

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>多行内联元素垂直居中-table</title>
 6     <style>
 7         .center-table {
 8             display: table; /**center code**/
 9             height: 140px;
10             border: 2px dashed #f69c55;
11         }
12         .v-cell {
13             display: table-cell; /**center code**/
14             vertical-align: middle; /**center code**/
15         }
16     </style>
17 </head>
18 <body>
19 <p>
20     利用表布局的vertical-align: middle可以实现子元素的垂直居中。
21 </p>
22 <div class="center-table">
23     <p class="v-cell">The more technology you learn, the more you realize how little you know. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
24  　　　　At vel eos laboriosam officia. Delectus, voluptas cumque quaerat ad sint velit ex! Molestiae, voluptatibus sunt doloribus ipsum distinctio consectetur quibusdam voluptate.
25     </p>
26 </div>
27 </body>
28 </html>

2.2.2 多行内联元素垂直居中-flex

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>多行内联元素垂直居中-flex</title>
 6     <style>
 7         .center-flex {
 8             height: 140px;
 9             display: flex; /**center code**/
10             flex-direction: column; /**center code**/
11             justify-content: center; /**center code**/
12             border: 2px dashed #f69c55;
13         }
14     </style>
15 </head>
16 <body>
17 <p>
18     多行内联元素垂直居中-flex
19 </p>
20 <div class="center-flex">
21     <p>Dance like nobody is watching, code like everybody is. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, aspernatur sed         
22 　　　　alias. Ducimus, facilis, quasi, voluptate assumenda aut incidunt cupiditate fugit voluptates soluta illum aspernatur odit qui quae esse sint! 
23     </p>
24 </div>
25 </body>
26 </html>

2.2.3 多行内联元素垂直居中-伪元素

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>多行内联元素垂直居中-伪元素</title>
 6     <style>
 7         .ghost-center {
 8             position: relative;
 9             border: 2px dashed #f69c55;
10             padding: 10px 0;
11         }
12         .ghost-center::before {
13             content: " ";
14             display: inline-block;
15             height: 100%;
16             width: 1%;
17             vertical-align: middle;
18         }
19         .ghost-center p {
20             display: inline-block;
21             vertical-align: middle;
22             width: 12rem;
23             padding:1rem;
24             color:#fff;
25             background:#000;
26         }
27     </style>
28 </head>
29 <body>
30 <p>
31     利用“精灵元素”(ghost element)技术实现垂直居中，
32     即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。
33 </p>
34 <div class="ghost-center">
35     <p>“你毕业才两年，这三年工作经验是怎么来的？”程序员答：“加班加的。”</p>
36 </div>
37 </body>
38 </html>

2.3.1 固定高度的块元素垂直居中

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>固定高度的块元素垂直居中</title>
 6     <style>
 7         .parent {
 8             height: 140px;
 9             position: relative; /**center code**/
10             border: 2px dashed #f69c55;
11         }
12         .child {
13             position: absolute; /**center code**/
14             top: 50%; /**center code**/
15             height: 100px; /**center code**/
16             margin-top: -50px; /**center code**/
17             color:#fff;
18             background: #000;
19         }
20     </style>
21 </head>
22 <body>
23 <p>
24     通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。
25 </p>
26 <div class="parent">
27     <div class="child">控制复杂性是计算机编程的本质。</div>
28 </div>
29 </body>
30 </html>

2.3.2 未知高度的块元素垂直居中

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>未知高度的块元素垂直居中</title>
 6     <style>
 7         .parent {
 8             height: 140px;
 9             position: relative;
10             border: 2px dashed #f69c55;
11         }
12         .child {
13             position: absolute;
14             top: 50%;
15             transform: translateY(-50%);
16             background: black;
17             color: #fff;
18             padding: 1rem;
19             width: 12rem;
20         }
21     </style>
22 </head>
23 <body>
24 <p>
25     当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向
26     偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
27 </p>
28 <div class="parent">
29     <div class="child">世界上有 2 种人，懂二进制的和不懂二进制的。</div>
30 </div>
31 </body>
32 </html>

--------------------以上垂直居中-----------------------分割线-----------------------以下水平垂直居中------------------

3.1 固定宽高元素水平垂直居中

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>固定宽高元素水平垂直居中</title>
 6     <style>
 7         .parent {
 8             height: 140px;
 9             position: relative;
10             border: 2px dashed #f69c55;
11         }
12         .child {
13             width: 200px;
14             height: 80px;
15             padding: 10px;
16             position: absolute;
17             top: 50%;
18             left: 50%;
19             margin: -50px 0 0 -110px;
20             background: black;
21             color: #fff;
22         }
23     </style>
24 </head>
25 <body>
26 <p>
27     通过margin平移元素整体宽度的一半，使元素水平垂直居中。
28 </p>
29 <div class="parent">
30     <div class="child">控制复杂性是计算机编程的本质。</div>
31 </div>
32 </body>
33 </html>

3.2 未知宽高元素水平垂直居中

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>未知宽高元素水平垂直居中</title>
 6     <style>
 7         .parent {
 8             height: 140px;
 9             position: relative;
10             border: 2px dashed #f69c55;
11         }
12         .child {
13             padding: 10px;
14 
15             position: absolute;
16             top: 50%;
17             left: 50%;
18             transform: translate(-50%, -50%);
19 
20             color: #fff;
21             background: black;
22         }
23     </style>
24 </head>
25 <body>
26 <p>
27     利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
28 </p>
29 <div class="parent">
30     <div class="child">当你试图解决一个你不理解的问题时，复杂化就产生了。</div>
31 </div>
32 </body>
33 </html>

3.3 利用flex布局实现元素水平垂直居中

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>利用flex布局实现元素水平垂直居中</title>
 6     <style>
 7         .parent {
 8             height: 140px;
 9 
10             display: flex;
11             justify-content: center;
12             align-items: center;
13 
14             border: 2px dashed #f69c55;
15         }
16         .child {
17             padding: 20px;
18             background: black;
19             color: #fff;
20         }
21     </style>
22 </head>
23 <body>
24 <p>
25     利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；
26     而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
27 </p>
28 <div class="parent">
29     <div class="child">Facebook wasn't built in a day.</div>
30 </div>
31 </body>
32 </html>

3.4 利用grid布局实现元素水平垂直居中

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>利用grid布局实现元素水平垂直居中</title>
 6     <style>
 7         .parent {
 8             height: 140px;
 9             display: grid;
10             align-items:center;
11             border: 2px dashed #f69c55;
12         }
13         .child {
14             margin:auto;
15             padding: 20px;
16             width:10rem;
17             color: #fff;
18             background: black;
19         }
20     </style>
21 </head>
22 <body>
23 <p>
24     利用grid实现水平垂直居中，兼容性较差，不推荐。
25 </p>
26 <div class="parent">
27     <div class="child">好的程序员能写出人能读懂的代码。</div>
28 </div>
29 </body>
30 </html>

3.5 如何使DIV在屏幕上水平垂直居中显示

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>如何使DIV在屏幕上水平垂直居中显示？兼容性要好</title>
 6     <style>
 7         .outer {
 8             display: table;
 9             position: absolute;
10             height: 100%;
11             width: 100%;
12         }
13         .middle {
14             display: table-cell;
15             vertical-align: middle;
16         }
17         .inner {
18             margin:0 auto;
19             background: #2b2b2b;
20             color:#fff;
21             padding: 2rem;
22             max-width: 320px;
23         }
24     </style>
25 </head>
26 <body>
27 <div>
28     屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。
29 </div>
30 <div class="outer">
31     <div class="middle">
32         <div class="inner">
33             <p>一个好的程序员应该是那种过单行线都要往两边看的人。</p>
34             <button value="add" id="add">增加内容</button>
35         </div>
36     </div>
37 </div>
38 <script type="text/javascript" src="http://res.42du.cn/vendor/jquery/jquery.min.js"></script>
39 <script type="text/javascript">
40     $(document).ready(function () {
41         $("#add").click(function () {
42             $("p").after("<p>解决问题大多数都很容易；找到问题出在哪里却很难。</p>");
43         });
44     });
46 </script>
47 </body>
48 </html>

posted @ 2018-09-06 16:05 Sun·傲宇阅读(1993) 评论(0) 编辑收藏举报

刷新页面返回顶部

Sun·傲宇

知道自己想要什么，愿意为之付出与坚持，又何尝不是一种幸福！

水平居中/垂直居中/水平垂直居中总结

公告