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); /*水平居中 */
}

上面是“html标签div垂直居中的几种方法介绍”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2600.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！