如何使元素/文字 垂直居中?

Posted chengl062

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使元素/文字 垂直居中?相关的知识,希望对你有一定的参考价值。

昨天面试被问到这个问题,自己常用的是方法一和方法二,回来后查阅到了方法三,感觉莫名的好用,记录一下~

方法一:单行文字垂直居中 line-height等于height

方法二:块级元素垂直居中 position定位或者flex布局

水平居中 margin: 0 auto;+垂直位移position: relative;top: 50%;

注意:此时当前操作元素的头部到达页面一半的水平线处,

最后使用transform: translateY(-50%),使得元素向上平移(translate)自身高度的一半(50%)

方法三:父元素设置display:table,子元素设置table-cell

容器设为display:table,使他成为一个块级表格元素,子元素display:table-cell使子元素成为表格单元格,

然后就像在表格里一样,给子元素加个vertical-align: middle就行了,从而实现多行文字垂直居中

 

此外,display: table还能解决多列自适应布局和等高布局,如下:

技术图片

display:table系列几乎是和table系的元素相对应的:

table (类似 <table>)此元素会作为块级表格来显示,表格前后带有换行符。
inline-table (类似 <table>)此元素会作为内联表格来显示,表格前后没有换行符。
table-row-group (类似 <tbody>)此元素会作为一个或多个行的分组来显示。
table-header-group (类似 <thead>)此元素会作为一个或多个行的分组来显示。
table-footer-group (类似 <tfoot>)此元素会作为一个或多个行的分组来显示。
table-row (类似 <tr>)此元素会作为一个表格行显示。
table-column-group (类似 <colgroup>)此元素会作为一个或多个列的分组来显示。
table-column (类似 <col>)此元素会作为一个单元格列显示。
table-cell (类似 <td> 和 <th>)此元素会作为一个表格单元格显示。
table-caption (类似 <caption>)此元素会作为一个表格标题显示。

“display:table;”的CSS声明能够让一个html元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。

 

以上是关于如何使元素/文字 垂直居中?的主要内容,如果未能解决你的问题,请参考以下文章

如何让div中的行内元素的文字垂直居中

如何让DIV水平和垂直居中

如何设置a标签的宽高,如何使a标签的文字垂直居中

span内图片元素如何垂直居中

如何使文字在div中水平和垂直居中的css代码

使 div 中的元素垂直居中对齐