1.1 內聯元素水平居中javascript
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 塊級元素水平居中html
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-blockjava
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 多塊級元素水平居中-flexjquery
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>
-----------------以上水平居中----------------------------分割線-------------------------------如下垂直居中-----------------ios
2.1 單行內聯元素垂直居中-line-heightgit
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>