html标签div垂直居中的几种方法介绍

html标签div如何实现垂直居中，下面web建站小编给大家详细介绍垂直居中的几种方法！

1、利用line-height实现垂直居中

div{
  height: 500px;
  line-height: 500px;
  width: 500px;
  text-align:center;"
}

2、利用flex实现垂直居中

div{
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

3、利用translate实现垂直居中

div{
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50% , -50%);
}

4、利用calc实现垂直居中

div{
  position: absolute;
  top: calc(50% - 25px); /*垂直居中 */
  left:calc(50% - 50px); /*水平居中 */
}