CSS元素居中的一点总结

水平居中

• 对于行内元素，给他们的父容器设置text-align属性为center，即可实现。
• 对于块级元素，用一个父容器将其包裹，设置父容器margin左右auto。

垂直居中

• 如果父容器高度不固定，由内容撑开的话，给子元素设置上下相同的padding值就行。
• 绝对定位实现居中
  首先要保证，父元素设置了高度，position：relative；因为绝对定位脱离了文档流，可能会让父元素坍缩。
  保证了父元素之后，设置需要居中的元素

{
position：absolute；
top:50%;
left:50%;
margin-top: - height/2；
margin-left：- width/2；
}
/*之所以设置负margin是为了让元素居中，而不是左上角那个点居中。*/

如果需要居中的div没有固定的宽高，怎么办呢？
可以使用CSS3的一个属性transform

{
position：absolute；
top:50%;
left:50%;
transform:translate(-50%,-50%)；
}
/*让元素参照自己自身的位置进行偏移*/

• vertical-align 实现居中
  适用于行内元素。给需要垂直居中的元素前面用伪元素加一个兄弟元素

E ::before {
content:" ";
display :inline-block;
height:100%;
vertical-align:middle;
}
再给需要居中的元素设置 vertical-align：middle；

• 表格元素实现居中
  将父容器的display变成table-cell，然后父元素设置vertical-align：middle；
  注意此时父元素已不是block元素，宽高都会收缩！

flex布局实现居中

flex布局首先要设置父容器的display：flex；请看以下代码：

.container{
    display: flex;
    align-items: center; /*垂直居中子元素*/
    justify-content: center;/*水平居中子元素*/
}

这个Flexbox超级简单，你只需要简单的3行代码即可解决居中问题~~