1回答

好帮手慕夭夭

2018-12-13

已采纳

你好同学 , 解答如下:

1 .单行文本居中最常用的方法是使用行高 ,例如一div中的文字 , 给div设置行高的值等于这个div的高度就能实现垂直居中 . 要是深入到原理，涉及到很多概念：

(1)行高是指文本行基线间的垂直距离。首先得了解几个基本知识：下面几条线从上到下为：顶线、中线、基线、底线

行高：指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

行距：指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

半行距：行距的一半，即行距/2，照对上图，所以半行距也可以这么算：（行高-字体size）/2

(2) 接下来了解内容区、行内框、行框

内容区：底线和顶线包裹的区域，即图深灰色背景区域。

行内框：每个行内元素会生成一个行内框，在没有其他因素影响的时候（padding等），行内框等于内容区域，而设定行高时行内框高度不变，半行距【（行高-字体size）/2】分别增加/减少到内容区域的上下两边。

行框：指本行的一个虚拟的矩形框，行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度），当有多行内容时，每行都会有自己的行框。

所以当单行文字时，文本line-height与块元素height一致时会垂直居中.这里原理可能有一点复杂 , 了解一下就行了 . 

定位也能实现单行文本和多行文本居中效果 . 但是在实际中 , 不会去这么做 , 使用行高是实现单行文本最简单快捷的方式 . 

2.多行文本居中方式 ,使用vertical-align: middle;配合display: table-cell; 这里的原理比较简单 , 就是利用的表格里面单元格的内容对齐方式 .

vertical-align: middle;是表格中设置内容居中对齐的方式 ,所以元素设置display: table-cell;就是让元素变成类单元格 , 然后使用vertical-align: middle;就能让单元格里面的内容居中了 . 

希望解答了你的疑惑 , 祝学习愉快 ,望采纳 .

0