CSS的几种水平垂直居中

水平居中

• margin:0 auto
• text-align:conter
• flex布局；justify-content:conter

垂直居中

• 设置行高line-height，限于单行的行内元素

line-height = height

• 添加伪元素，:before，:after，限于多行的行内元素

vertical-align: middle，限于所有元素的相互垂直居中,针对行内元素
需要设置display:inline-block
所以需要设置:before一个高度为100% ,height:100%;
#div:: before{
　　content: '';
　　height: 100%;
　　width: 0px;
　　display: inline-block;
　　vertical-align: middle; 
}

• 表格table或者假装table

display:table-cell
然后再设置vertical-align:middle

• 使用flexbox

display:flex
align-items:conter
justify-content:conter

• cacl动态计算

margin-top:calc(50% + 高度的一半);
margin-left:calc(50% -宽度的一半);

• transform

需要设置position: relative;不同浏览器的transform前缀不一样。
{
　　position: relative;
　　top: 50%;
　　left: 50%;
　　-webkit-transform: translate(-50%, -50%);
　　-ms-transform: translate(-50%,-50%);
　　-moz-transform: translate(-50%,-50%);
　　-o-transform: translate(-50%,-50%);
　　transform: translate(-50%, -50%);    
}

• 绝对定位

父元素必须要position: relative;
子元素position: absolute;
然后上下左右都为0，margin:auto
{
　　position: absolute;
　　top: 0;
　　left: 0;
　　bottom: 0;
　　right: 0;
　　margin: auto;
}