CSS 垂直居中 + 水平居中

实现水平居中的几种方法

1. 针对块级元素

margin : 0 auto;

2. 针对行内元素

text-align : center    //给父级设置

3. 绝对定位position:absolute

<div class="parent">
    <div class="children"></div>
</div>

.parent{
    background: pink;
    text-align: center;
     position: relative;
    height: 50px;
}
.children{
    background: yellow;
    position: absolute;
    height: 50px;
    width: 50px;
    left:50%;
    // 或margin-left:-(自身宽度的一半)
    transform: translateX(-50%); // CSS3
    
}

4. flex布局 主轴方向 justify-content: center 在flex容器设置

方便但是兼容差 （支持IE10+）

.parent{
    display: flex;
    background: pink;
    height: 200px;
    //align-items: center; 交叉轴方向上居中  
    justify-content: center ;
}
.children{
    height: 50px;
    width: 50px;
    background: yellow;
    border: 1px solid #000;
}

实现垂直居中的几种方法

1. 绝对定位position:absolute

和水平居中一样，只是方向不同

.children{
    top:50%;
    transform: translateY(-50%); // 或margin-top:-(自身高度的一半)
}

2. flex 交叉轴方向 align-items: center 在flex容器设置

.parent{
    display: flex;
    background: pink;
    height: 200px;
    align-items: center ;
}

3. 实现文字的垂直居中line-hight

行高与元素高度相同，则该元素内文字就垂直居中了。

4.所有子级设置 vertical-align : middle

子级并不是根据父级进行居中，只会以同级最高子元素的中心作为中线进行居中对齐。
因此，最高子元素与父级同高时，其他子元素就相对父级垂直居中了。
（可以把最高元素width设置为0，来隐藏该最高子元素）

<div class="parent">
    <img class="children"></img> 
    <img class="children2"></img>       
</div>

.parent{
    backgroud: pink;
}
.children{
    height: 50px;
    width: 50px;
    vertical-align: middle;
    backgroud: green;
}
.children2{
    height: 200px;
    width: 0;
    vertical-align:middle
}

5.父级display:table-cell再设置vertical-align:center

此时子级会相对父级垂直居中

<div class="div1">
      <div class="div2"></div> 
</div>

.div1{
   height: 150px;
   width: 500px;
   background: pink;
   display: table-cell;
   vertical-align: middle;
} 
.div2{
   height: 50px;
   width: 50px;
   background: black;
}