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

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

效果图如下图

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

多行文本垂直居中的三种方法相关推荐

CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
CSS：实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用. 实现多行文本垂直居中的四种方法 1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将 ...
html2张图片垂直居中,任意图片实现垂直居中的三种方法(兼容性还不错)
在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.我总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准 ...
html整体垂直居中,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方法教程,遵循代码与文章教程懂得驾驭并加以应用. 一.使用flex完成垂直居中操作css flex实现垂直居中.flex兴许不是实现垂直居中最好的抉择,因为IE ...
a标签居中 img vue,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方式教程,依据代码与文章教程熟习掌握并加以应用. 一.使用flex完成垂直居中操纵css flex实现垂直居中.flex或许不是完成垂直居中最好的选择,由于IE ...
不定高垂直居中的三种方法
不定高垂直居中(核心代码) 1.display:table-cell + vertical-align:middle 父元素(.parent)设置display:table-cell 变成单元格,再设 ...
CSS 实现垂直居中的三种方法
1.table-cell + vertical-align vertical-align 适用于inline-block 和 table-call 2. absolute + transform 3. ...
python提供了方法用于读取文本文件内容_python提供了哪三种方法用于读取文本文件的内容？...
三种方法分别是:"read()"."readline()"."readlines()"."read()"是一次性读取文件 ...
让子盒子水平和垂直居中的五种方法
首先创建互相嵌套的两个盒子浏览器中打开,盒子的样式为: 接下来是让子盒子水平和垂直居中的五种方法: 方法一:利用文本水平居中text-align: center和行高line-height进行实现 ...

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

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

多行文本垂直居中的三种方法相关推荐

最新文章

热门文章