居中

水平居中

margin: 0 auto;
　　　　加在子元素上面， 父元素或子元素有float属性，都会失效
text-align: center;
　　　　多用于div下面的img元素， 当img有float属性时，会失效
position + margin
　　　　left: 50%; margin-left: -元素宽度的一半;    由于top、left偏移了父对象的50%高度宽度，所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比，因为百分比是针对父对象的，所以需要手动计算定值指定margin值
position + transform
　　　　left: 50%; transform: translateX(-50%);　　适用元素宽度未知的情况;   由于transform的计算基准是元素本身，所以这里可以用50%来做反向偏移
position + margin: auto
　　　　position: absoulte; top:0; left:0; right:0; bottom:0; margin:auto;  利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中
display: table-cell； text-align:center;
　　　　父元素，使其按表格显示
display: flex; justify-content: center;
　　　　父元素上绑定，手机端表现良好,PC端某些旧浏览器支持度不高

 

垂直居中

line-height
　　　　line-height: height; 只适用于文字， 文字的line-height=其元素高度
vertical-align: middle
　　　　这个方法关键要有一个和容器一样高的元素作为居中的一个参照， 参照物可以用伪元素：after, :before来实现（content:''; width:0; height:100%; vertical-align:middle;display:inline-block;）
display: table-cell
　　　　vertical-align:middle
position + margin
　　　　top: 50%; margin-top: -元素高度的一半;   由于top、left偏移了父对象的50%高度宽度，所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比，因为百分比是针对父对象的，所以需要手动计算定值指定margin值
position + transform
　　　　top: 50%; transformY(-50%); 适用元素高度未知的情况;   由于transform的计算基准是元素本身，所以这里可以用50%来做反向偏移
position + margin:auto
　　　　position: absoulte; top:0; left:0; right:0; bottom:0; margin:auto;  利用css定位规则，设置左右、上下方向定位为0，margin为auto，让css根据定位计算margin值，用hack的方式实现居中
display: flex; align-items: center;
　　　　父元素绑定，移动端表现良好,PC端某些旧浏览器支持度不高

 

全部居中

position + margin
position + transform
position + margin: auto
display: table-cell
flex