垂直居中的几种方式

垂直居中的方式我平时只用 flex 布局搞定，面试官喜欢问这个，遇到不只一次了，这就需要稍稍准备一下了。

一、flex 布局

#container{
    display:flex;
  justify-content:center;
  align-items:center;
}

二、绝对定位

#container{
    position:relative;
}
#item{
    position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

三、文本上下居中

这个非常讲究了，vertical-align 和 line-height 这两个属性一个个尝试，总有一款适合你。

// 方式一
#item{
    vertical-align:middle;
}

// 方式二
#item{
    line-height:<heigt>;
}

「@浪里淘沙的小法师」