CSS实现垂直布局的 8 种方式（附总结思维导图）

2021-05-2009:13:01网页制作Comments2,642 views字数 2656阅读模式

1. 单行文本垂直居中

若文本为单行文本的话，直接使用 line-height 等于父元素的高度即可实现。示例代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

HTML 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

CSS 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

执行结果如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

若元素是行内块级元素, 基本思想是子元素使用 display: inline-block, vertical-align: middle 并让父元素行高等同于高度。示例代码如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

HTML 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

CSS 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

.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;
}
复制代码

执行结果如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

关于定位的知识，可以从该专题的导航帖点我进入去看一下深入理解position文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

top: 50%; margin-top: 等于负的高度的一半 就可以实现垂直居中，示例代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

HTML 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

CSS 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

.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;
}
复制代码

执行结果同上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

top 和 bottom 将子元素拉伸至 100%，设置指定的高度，通过 margin:auto; 即可实现垂直居中，示例代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

HTML 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

CSS 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 为父级容器开启相对定位 */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  /* 垂直拉满 */
  top: 0;
  bottom: 0;
  /* margin: auto 即可实现 */
  margin: auto;
}
复制代码

执行结果同上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

5. 使用 position + top + transform 实现垂直居中

通过 top:50%; 和 translateY(-50%) 即可实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

HTML 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

CSS 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

.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%);
}
复制代码

执行结果同上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

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

使用这种方式存在局限性，padding-top/bottom 各占剩余高度的一半即可实现，这里不做代码展示了，开发实际中用的很少。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

7. 使用 Flex 实现垂直居中

关于 Flex 布局的详细用法请参考点我进入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

使用 Flex 实现一个垂直居中非常的容器，具体代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

CSS 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 开启 flex 布局 */
  display: flex;
  /* 方法一 */
  /* align-items: center; */
}
.child {
  /* 方法二 */
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
}
复制代码

HTML 代码和效果图同上文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

8. 使用 Grid 实现垂直居中

关于 Grid 布局的详细用法请参考点我进入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

开启 Grid 布局也也可以实现居中效果，不过仅仅实现一个居中就有点大材小用了。示例代码如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

CSS 代码文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/21451.html

.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;
}
复制代码