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

1. 前言

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

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

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

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

2. 实例代码

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

实例演示
预览 复制