在研究垂直居中的时候,看到处理垂直居中的话,很多都是使用的是vertical-align: middle + display: table-cell
的形式,但是对于vertical-align: middle
,我知道在inline
或者inline-block
也可以实现垂直居中,那么为什么经常还是会看到很多人使用vertical-align: middle+display:table-cell
。
在研究垂直居中的时候,看到处理垂直居中的话,很多都是使用的是vertical-align: middle + display: table-cell
的形式,但是对于vertical-align: middle
,我知道在inline
或者inline-block
也可以实现垂直居中,那么为什么经常还是会看到很多人使用vertical-align: middle+display:table-cell
。
css很多地方是“无理由”的,不建议使用display: table-cell来做垂直居中,很多人都弄不清楚vertical-align到底做了什么。
这点可以参考:
张鑫旭CSS深入理解vertical-align和line-height的基友关系
使用position或者flex更为简单可靠。
2 回答817 阅读✓ 已解决
4 回答880 阅读✓ 已解决
2 回答1.1k 阅读✓ 已解决
2 回答991 阅读✓ 已解决
2 回答2.5k 阅读
2 回答1.5k 阅读
1 回答983 阅读✓ 已解决
经过研究,我明白了,是利用
display: table-cell
的表格特性,内部的子元素会按照vertical-align: middle;
垂直居中