表格布局实现居中布局

1. 前言

其实 CSS 布局流行起来之前一直使用的是表格布局。

在居中布局这种场景下，表格布局也很适用。

2. 实例代码

来看看表格具体如何实现居中：

运行结果：

此布局的关键点在于：

• 父元素上 3 个样式设置：display: table-cell; text-align: center; vertical-align: center;；
• 子元素上设置display: inline-block;。

3. 小结

我知道看到这里很多同学都郁闷了：一个居中布局就这么多种方式，我得学到猴年马月才能记得住啊…

其实大可不必，方案过多虽然会导致有些懵，但如果我就为你指明一个方案呢？

重点练会一个方案，其他方案作为了解即可，这样是不是就感觉不那么困难了呢？

那么最推荐的就是最流行的同时也是代码量最少的： 弹性布局 方案。只要不是一些需要兼容很低版本浏览器的网站，你只需重点练会这一种就可以了。但如果你找了个非要兼容低版本浏览器的工作，那么推荐你 绝对定位 法。

本章我们带领大家用多种方式实现了居中布局，当然不仅仅只有这几种方式能够实现居中，但是这几种是目前来说最实用的。

其他没提到方式有的比较偏门，实际开发中很少用到。