多行文本垂直居中的三种方法

作者：木道寻08 | 2024-07-19 20:50:18

踩

多行文本垂直居中

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

效果图如下图

方法一：父元素使用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的一半*/
}

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】