标签：nta 单元格 语义 head 没有 column 面试 nsf spl
昨天面试被问到这个问题，自己常用的是方法一和方法二，回来后查阅到了方法三，感觉莫名的好用，记录一下~
水平居中 margin: 0 auto;+垂直位移position: relative；top: 50%;
注意：此时当前操作元素的头部到达页面一半的水平线处，
最后使用transform: translateY(-50%)，使得元素向上平移（translate）自身高度的一半(50%)
容器设为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那样的制表标签所导致的语义化问题。
标签：nta 单元格 语义 head 没有 column 面试 nsf spl
原文地址：https://www.cnblogs.com/chengl062/p/11388144.html
