昨天面试被问到这个问题,自己常用的是方法一和方法二,回来后查阅到了方法三,感觉莫名的好用,记录一下~
方法一:单行文字垂直居中 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那样的制表标签所导致的语义化问题。
原文地址:https://www.cnblogs.com/chengl062/p/11388144.html
时间: 2024-11-08 22:03:35