-
利用的知识点:通过display转化成为表格的形式,再采用垂直居中的方法得到需要的结果
display:table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
display:table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>
-
原代码如图所示:
-
结果如图所示:
-
需要的注意的是, 这个布局的最大的好处是不管是单行还是多行都可以比较完美的实现居中的效果。
-
结论:希望css可以出一个高级一点的属性吧,我觉得这个方法还是回到之前的表格布局时代,仅仅提供参考
Css 利用table-cell实现居中的方法
最新推荐文章于 2024-08-18 03:01:33 发布