实现垂直布局的 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 并让父元素行高等同于高度。示例代码如下所示：

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 实现垂直居中

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; 即可实现垂直居中，示例代码如下：

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: 0;
  bottom: 0;
  /* margin: auto 即可实现 */
  margin: auto;
}

执行结果：

 

 

 

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

通过 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.使用flex垂直居中

css代码、

.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代码和效果同上

总结：

 

 

.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%);}

 

标签：方式,color,top,布局,300px,height,垂直,background,margin
来源： https://www.cnblogs.com/zfy050323/p/15732821.html