CSS面试高频：让子元素在父元素里水平垂直居中

让子元素在父元素里水平垂直居中

行内元素

• 水平居中：在父容器里设置

 text-align:center

• 垂直居中：文字行高=盒子高度

 .box {
    height:20px;
    line-height:20px;
    }

块级元素

• 水平居中：

 margin:0 auto  或  margin:0 auto  //计算值取决于剩余空间

但是该方法无法垂直居中

• 垂直水平居中：

1.绝对定位+margin（需指定子元素的宽高）

 .father {
      position:relative;
      min-height:500px;
      background:pink;
      }
 .son {
      position:absolute;
      width:200px;
      height:100px;
      background:red;
      top:50%;
      left:50%;
      margin-top:-50px;
      margin-left:-100px;
      }

2.绝对定位+translate（CSS3位移属性,无需指定宽高）

 .father {
      position:relative;
      min-height:500px;
      background:pink;
      }
 .son {
      position:absolute;
      background:red;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%); // 以元素自身的宽高为基准换算和移动(动态计算宽高)
      }

3.flex+justify-content+align-items（全部子元素居中)

 .father {
      display:flex;
      justify-content:center; //水平居中
      align-items:center; //垂直居中
      min-height:500px;
      background:pink;
      }
 .son {
      background:red;
      }

4.flex+margin:auto（指定某个子元素居中）

 .father {
      display:flex;
      min-height:500px;
      background:pink;
      }
 .son {
      margin：auto; //使该子元素在剩余空间里，水平垂直居中
      }