这里不讨论行内元素的居中！！
盒子垂直居中+水平居中的需求时经常遇到的，看到的较多实现逻辑是固定content-box的宽度，通过让margin-left和margin-top等于宽或高的负一半来实现，抑或不固定宽度，通过JS调整margin-left和margin-top的值，这俩种方法原理都一样。
而我接下来要讲的是content不定宽的情况下，CSS的源生实现。
利用table实现垂直水平居中
主要利用td的vertical-align: middle;属性实现垂直居中，当然你可以用display:table-cell;也可以得到一样的效果。配合margin: 0 auto;实现水平居中,支持IE 8+。
效果：https://codepen.io/FreadChen/...
*{
padding: 0;
margin: 0;
}
html,body,.center-box{
height: 100%;
width:100%;
}
.center-box>tr>td{
height: 100%;
vertical-align: middle;
}
.content-box{
margin: 0 auto;
/*下面这段是非必须的代码,演示效果需要*/
background: #1f2d3d;
width: 200px;
height: 200px;
}
利用flex实现水平垂直居中
利用flex布局可以实现更多功能，这里利用了“justify-content”实现水平居中、“align-items”实现垂直居中，“flex: 0 0 auto;”让元素保持原来的宽高。这个技术的局限在于支持IE 10+。
了解Flex请戳：/blo...
看效果请戳：https://codepen.io/FreadChen/...
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.center-box{
display: -webkit-flex; /* Safari */
display: flex;
/* // 水平居中 */
justify-content: center;
/* // 垂直居中 */
align-items: center;
height: 100%;
width: 100%;
}
.content-box{
flex: 0 0 auto;
width: 200px;
height: 200px;
background: #1f2d3d;
}
利用position + transform实现垂直居中
利用position的绝对定位absolute(absolute的使用技巧自行了解)将left和top都设为50%；再利用transform: translate(-50%,-50%);来补偿元素宽高所带来的位置影响。该技巧支持IE9+。
看效果请戳：https://codepen.io/FreadChen/...
*{
padding: 0;
margin: 0;
}
html,body,.center-box{
height: 100%;
width:100%;
}
.content-box{
margin: 0 auto;
/*下面这段是非必须的代码,演示效果需要*/
background: #1f2d3d;
width: 200px;
height: 200px;
position:absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%); /* IE 9 */
-webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
}
