绝对定位+平移实现居中布局

1. 前言

有时中间盒子的内容是要靠后台传过来的数据决定的，如果写死的话，当数据较多时就会发生溢出，数据较少时又会空出一大片，所以我们需要一种更加智能的方式来实现居中布局。

绝对定位 + 平移 是 绝对定位 + 负边距的改进版，那么具体都改进了哪些方面呢？

负边距的百分比并不是相对于自身，而是相对于父元素，所以只能写具体的像素值，显得不够智能。

而平移相对于自身，只需要无脑写 -50% 就可以了。

2. 实例代码

来看如何用绝对定位+平移来实现居中布局：

运行结果：

3. 小结

• margin 的百分比是相对于父元素的宽；
• translate 函数的百分比是相对于自身；
• 不仅适用于未知宽高，也同样适用于固定宽高的居中布局。