第一種：display:table-cell
組合使用display:table-cell和vertical-align、text-align，使父元素內的所有行內元素水平垂直居中（內部div設置display:inline-block即可）。
這在子元素不確定寬高和數量時，特別實用！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>Demo001_displayTable</title> 7 <style> 8 /*** table-cell middle center組合使用 ***/ 9 .cell { 10 display: table-cell; 11 vertical-align: middle; 12 text-align: center; 13 width: 240px; 14 height: 180px; 15 border:1px solid #666; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="cell"> 21 <p>我愛你</p> 22 </div> 23 <div class="cell"> 24 <p>我愛你</p><p>親愛的中國</p> 25 </div> 26 <div class="cell"> 27 <p>我愛你</p><p>親愛的中國</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div> 28 </div> 29 </body> 30 </html>
第二種 transform:translate(-50%,-50%)
translate()函數是css3的新特性，在不知道自身寬高的情況下，可以利用它來進行水平垂直居中。 當使用：top:50%, left:50%，是以左上角為原點，故不處於中心位置。 translate(-50%, -50%)作用是，往上（X軸），左（Y軸）移動自身長度的50%，以使其居於中心位置。
與負margin-left和margin-top實現居中不同的是，margin-left必須知道自身的寬高，而translate可以在不知道寬高的情況下進行居中，
tranlate（）函數中的百分比是相對於自身寬高的百分比，所以能進行居中
.content {
padding:10px;
background:green;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
}
第三種用彈性布局實現垂直左右居中
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .wrap{ 12 width: 100px; 13 height: 100px; 14 border: 1px solid #000; 15 margin: 3.125em auto; 16 display: flex; 17 justify-content: center; 18 align-items: center; 19 20 } 21 .in{ 22 width: 10px; 23 height: 10px; 24 background: #000; 25 border-radius: 50%; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="wrap"> 31 <div class="in"></div> 32 </div> 33 </body> 34 </html>
display:flex; 設置.wrap為彈性布局
justify-content:center;定義項目在主軸(水平方向)上居中對齊
align-items:center;定義項目在交叉軸(垂直方向)上居中對齊