多行文本垂直居中的三种方法-优快云博客

本文链接：https://blog.youkuaiyun.com/carpenterworm1874/article/details/79664675

本文介绍并展示了三种实现多行文本垂直居中的方法，包括使用display: table-cell、display: inline-block以及绝对定位结合负边距的技术方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇是我整理的多行文本垂直居中的三种方法

效果图如下图

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

<div class="span_box bg_box">
	<span class="words_span">
		方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
	</span>
</div>

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

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

.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;  /*基线居中对齐*/
}

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

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

.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的一半*/
}

三种方法放一起的效果和代码

<body>
<div class="span_box bg_box">
	<span class="words_span">
		方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格，子元素设置vertical-align:middle即可垂直居中
	</span>
</div>
<div class="p_box bg_box">
	<p class="words_p">
		方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。
	</p>
</div>
<div class="wrapper bg_box">
	<div class="content_box">
		方法三：脱离文档流的居中方式，把内部div设置宽高之后，再设置top为50%，使用负边距调整，将margin-top设置为负的高度的一半就可以垂直居中了。缺点：需要计算出多行文字固定的高度。高度一旦改变，负边距也要调整。</div>
</div>
</body>

.bg_box {
	width: 300px;
	height: 300px;
	margin-top: 20px;
	background-color: #BBBBBB;
}

/*方法一*/
.span_box {
	display: table;
}
.words_span {
	display: table-cell;
	vertical-align: middle;
}

/*方法二*/
.p_box {
	line-height: 300px;
}
.words_p {
	display: inline-block;
	line-height: 20px;  /*单独给子元素设置行高，覆盖父级元素的行高*/
	vertical-align: middle;  /*基线居中对齐*/
}

/*方法三*/
.wrapper {
	position: relative;
	overflow: hidden;
}
.content_box {
	position: absolute;
	top: 50%;
	width: 300px;
	height: 127px; /*本页面中这么多文字的高度，文本篇幅改变，高度也会变*/
	margin-top: -63.5px;  /*height的一半*/
}