CSS多行文本垂直居中

发表于 更新于 分类于

方法一：display:table

父元素使用 display:table 和子元素使用 display:table-cell 属性来模拟表格，子元素设置 vertical-align:middle 即可垂直居中

1
2
3
4
5
<div class="span_box bg_box">
  <span class="words_span">
    方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
  </span>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.bg_box {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  background-color: #bbbbbb;
}
/*方法一*/
.span_box {
  display: table;
}
.words_span {
  display: table-cell;
  vertical-align: middle;
}

方法二：display:inline-block

对子元素设置 display:inline-block 属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的 height 和 line-height。对子元素设置 vertical-align:middle 属性，使其基线对齐。添加 line-height 属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。

1
2
3
4
5
<div class="p_box bg_box">
  <p class="words_p">
    方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。
  </p>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.bg_box {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  background-color: #bbbbbb;
}
/*方法二*/
.p_box {
  line-height: 300px;
}
.words_p {
  display: inline-block;
  line-height: 20px; /*单独给子元素设置行高，覆盖父级元素的行高*/
  vertical-align: middle; /*基线居中对齐*/
}

方法三：绝对定位

margin-top: -[height/2];

脱离文档流的居中方式，把内部 div 设置宽高之后，再设置 top 为 50%，使用负边距调整，将 margin-top 设置为负的高度的一半就可以垂直居中了。缺点：需要计算出多行文字固定的高度。高度一旦改变，负边距也要调整。

1
2
3
4
5
<div class="wrapper bg_box">
  <div class="content_box">
    方法三：脱离文档流的居中方式，把内部div设置宽高之后，再设置top为50%，使用负边距调整，将margin-top设置为负的高度的一半就可以垂直居中了。缺点：需要计算出多行文字固定的高度。高度一旦改变，负边距也要调整。
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.bg_box {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  background-color: #bbbbbb;
}
/*方法三*/
.wrapper {
  position: relative;
  overflow: hidden;
}
.content_box {
  position: absolute;
  top: 50%;
  width: 300px;
  height: 127px; /*本页面中这么多文字的高度，文本篇幅改变，高度也会变*/
  margin-top: -63.5px; /*height的一半*/
}

transfrom: translateY(-50%)

脱离文档流的居中方式，把内部 div 设置宽高之后，再设置 top 为 50%，使用负边距调整，将 margin-top 设置为负的高度的一半就可以垂直居中了。

1
2
3
4
5
6
<div class="wrapper bg_box">
  <div class="content_box">
    方法三：脱离文档流的居中方式，把内部 div 设置宽高之后，再设置 top 为
    50%，使用负边距调整，将 margin-top 设置为负的高度的一半就可以垂直居中了。
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.bg_box {
  width: 300px;
  height: 300px;
  margin-top: 20px;
  background-color: #bbbbbb;
}
/*方法三*/
.wrapper {
  position: relative;
  overflow: hidden;
}
.content_box {
  position: absolute;
  top: 50%;
  width: 300px;
  transform: translateY(-50%);
}