用CSS实现垂直布局的8种方法（附摘要思维导图）

1.单行文本垂直居中

如果文本是单行文本，直接使用line-height等于父元素的高度。这是可以实现的。示例代码如下：

HTML代码

<div class="text">这是一个需要居中的测试文本</div>
复制代码

CSS代码

.text {
  height: 200px;
  font-size: 3rem;
  font-weight: bold;
  background-color: #ff8787;
  text-align: center;
  /* 通过 line-height 等于元素高度即可完成文字垂直居中 */
  line-height: 200px;
}
复制代码

执行结果如下：

2.内联块级元素垂直居中

如果该元素是内联块级元素，基本思想是使用 display: inline-block,vertical-align: middle 并使父元素的line-height 等于高度。示例代码如下：

HTML代码

<div class="parent">
  <div class="child"></div>
</div>
复制代码

CSS代码

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 为父级容器设置行高 */
  line-height: 500px;
}
.child {
  width: 300px;
  height: 300px;
  /* 将子级元素设置为 inline-block 元素 */
  display: inline-block;
  /* 通过 vertical-align: middle; 实现居中 */
  vertical-align: middle;
  background-color: #91a7ff;
}
复制代码

执行结果如下

3。使用position+top+height+margin实现垂直居中

关于定位的知识可以从这里获得让我进入主题的导航帖子来更深入地了解position

top：50%； margin-top：等于负高度的一半，实现垂直居中。示例代码如下：

HTML代码

<div class="parent">
  <div class="child"></div>
</div>
复制代码

CSS代码

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 为父级容器开启相对定位 */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  top: 50%;
  /* margin-top: 等于负高度的一半 */
  margin-top: -150px;
}
复制代码

执行结果同上

4。使用position+top+bottom+height+margin实现垂直居中

top和bottom将子元素拉伸到任100%❝Margin，设置指定高度，甚至：Auto ;

5。使用位置+顶部+变换实现垂直居中

这可以通过top:50%;和translateY(-50%)来实现。

HTML代码

<div class="parent">
  <div class="child"></div>
</div>
复制代码

CSS代码

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 为父级容器开启相对定位 */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
复制代码

执行结果同上

6.使用border-box + padding实现垂直居中

使用这种方法有局限性，padding-top/bottom可以通过各占剩余高度的一半来实现。此处未显示代码。实际开发中很少使用。？代码和效果图同上面

8。使用Grid实现垂直居中

Grid布局的详细使用请看我的文章

开启Grid布局也可以实现居中效果，但是只实现一个居中有点大材小用了。 。示例代码如下：

CSS代码

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  display: grid;
  /* 方法一 */
  /* align-items: center; */
  /* 方法二 */
  /* align-content: center; */
}
.child {
  /* 方法三 */
  /* margin: auto; */
  /* 方法四 */
  align-self: center;
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
}
复制代码

HTML代码和效果同上

值得注意的是，网格上的样式仅对当前网格有效。

总结

作者：繁荣的彼岸