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