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>