第一种：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 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="100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>
28 </div>
29 </body>
30 </html>
View Code 第二种 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>
View Code
display:flex; 设置.wrap为弹性布局
justify-content:center;定义项目在主轴(水平方向)上居中对齐
align-items:center;定义项目在交叉轴(垂直方向)上居中对齐