HTML元素垂直居中的方法

最新推荐文章于 2024-09-16 09:20:49 发布

「已注销」

最新推荐文章于 2024-09-16 09:20:49 发布

阅读量354

点赞数

分类专栏： Web前端文章标签： CSS vertical-align 垂直居中

本文链接：https://blog.csdn.net/Good_zwn/article/details/99314803

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

方法一

条件：父元素为block或者inline-block并且高度不为min-height，子元素为inline或inline-block

使用一个元素撑开其父元素，并设置其vertical-align:middle，其它行内元素遍可垂直居中

HTML代码：

    <div id="root">
      <div class="box">IFC</div>
      <div class="box">IFC</div>
      <div class="box">IFC</div>
    </div>

CSS代码：

body {
  margin: 0;
}
#root {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-color: antiquewhite;
  text-align: center;
}
#root::before {
  content: "";
  display: inline-block;
  width: 0;
  left: 0;
  top: 0;
  height: 100%;
  vertical-align: middle;
}
.box {
  display: inline-block;
}

注意：

父元素最好有一个position值，relative、absolute都行，这样其子元素定位就不容易出问题

用来撑开父元素的那个元素不能是绝对定位