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

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

效果图如下图

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

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

.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属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。

	

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

.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设置宽高之后，再设置top为50%，使用负边距调整，将margin-top设置为负的高度的一半就可以垂直居中了。缺点：需要计算出多行文字固定的高度。高度一旦改变，负边距也要调整。

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

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

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


	

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


	

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

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