table-cell的手机应用场景
这篇讲的是如何利用一个有点“过气”的 CSS 属性 `display: table-cell` 来解决移动端开发中棘手的垂直居中问题。作者从一篇老文章出发，重新审视了 `table-cell` 在当前移动场景下的价值。 文章先盘点了传统的垂直居中方案，如 `position` 配合负 `margin`，虽然兼容性好但必须预先知道元素高度，内容超出时容易“走光”。作者指出，这些方案在需要内容自适应垂直居中的移动 H5 页面里显得力不从心。 核心方案在于利用 `table-cell` 模拟表格单元格的行为。只需父元素设为 `display: table`，子元素设为 `display: table-cell` 并加上 `vertical-align: middle`，就能让内容在容器内完美垂直居中，无需知晓具体高度。作者还分享了一个关键的踩坑经验：必须避免在 `table-cell` 元素上同时使用 `position` 定位，否则效果会失效。 总的来说，这篇文章为移动端，特别是单屏滚动的 H5 活动页开发，提供了一个轻巧、可靠的垂直居中思路，非常适合那些对布局高度自适应有要求的场景。