CSS中的垂直居中的几种方法

1、利用padding实现内容垂直居中

.wrap {
  margin: 50px auto;
  background-color: #ccc;
  padding: 30px;
  text-align: center;
}

2、绝对定位

在块元素上添加绝对定位属性和负margin,如果不是块元素可以转换成inline-block。
如果是未知元素大小的情况可以采用transform:translate(-50%,-50%);来处理，但是transform兼容性需要考虑

  
  

  

  

    我是文字
  

3、使用vertical-align:middle

使用vertical-align:middle;有两种情况：
第一种情况是在父元素上配合table-cell使用，父元素内的所有元素都会整体垂直居中，无论子元素是block元素，还是inline元素。同时配合 text-align: center;inline和inline-block元素还可实现水平居中。

  
  

  

  

    
我是块元素我不受text-align控制
    我是行内元素
  

第二种情况是，子元素之间的垂直居中对齐。如果只有一个对象，想让它在父元素中对齐，可以添加一个空的比较对象

father:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

如果有多个对象，可以给它们都添加vertical-align:middle,从而实现子元素之间的垂直对齐。

4、利用行高实现

元素的高度和行高相等实现居中，一般用于文字。

.demo {
      width: 100px;
      height: 100px;
      line-height: 100px;
      color: red;
}

5、flex实现

.parent{
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}