css之display:table

本是古典何须时尚 2023-01-08 12:29 82阅读 0赞

参考文章链接：[https://www.cnblogs.com/stephen666/p/6995388.html][https_www.cnblogs.com_stephen666_p_6995388.html]

一、父元素宽度固定，想让若干个子元素平分宽度

通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。

可以使用display：table来解决：

![20210120110652201.png][]

二、块级子元素垂直居中

想让一个div或p在父元素中垂直居中一直是很多人解决不了的问题（注意直接对块级元素使用vertical-align是不能解决这个问题的，vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐），同样可以使用display：table方便解决：

![20210120110851601.png][]

**注意：虽然display：table解决了避免使用表格的问题，但有几个需要注意的：**

（1）display: table时padding会失效
    （2）display: table-row时margin、padding同时失效
    （3）display: table-cell时margin会失效

[https_www.cnblogs.com_stephen666_p_6995388.html]: https://www.cnblogs.com/stephen666/p/6995388.html
[20210120110652201.png]: /images/20221119/239e2b5a5b3f44609e72b5de965dfd7c.png
[20210120110851601.png]: /images/20221119/52936de9e4a6436da72b946204ce8389.png