内联元素（inline）和行内块元素（inline-block）的水平垂直居中很简单，设置line-height和text-align: center就可以了。
这里主要说块级元素（block）的水平垂直居中方式。
整体示例代码：
<style>
.center{
border:1px solid red;
/* 填入下列样式代码 */
}
</style>
<div class="center">水平居中</div>
margin:0 auto即可原理：由于left偏移了父对象的50%宽度，所以需要利用margin反向偏移居中块的50%宽度。
position: absolute;
left: 50%;
margin-left: -xxpx;
原理：利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位自动计算margin值，用hack的方式实现居中。
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
注意：无固定的宽度能做到的，肯定是可以作用在“有固定的宽度”上的，所以就不在“有固定的宽度”中列出。
实现原理：与采用负margin的方式原理类似，不同点是使用了transform来代替margin做反向偏移，由于transform的计算基准是元素本身，所以这里可以用50%来做反向偏移。
position: absolute;
left: 50%;
transform: translateX(-50%);
display: table;
margin:0 auto;
父元素设置：
display:flex;
justify-content:center;
方法1：absolute + 负margin
方法2：absolute + margin: auto
方法1：absolute + transform反向偏移
方法2：flex布局
综合以上水平居中和垂直居中方式可以得到：
（完）