绝对定位实现居中布局

1. 前言

居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。

固定宽高很好理解，非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。

这两种方式也造就了不一样的技术实现，我们来看一下。

2. 实例代码

假如我们有一个宽度占 70%，高度占 25% 的盒子，我们可以这么写：

运行结果：

代码说明：

• 如果不给定宽高，盒子将会和父元素一样大，因为绝对定位上下左右都是 0，意为紧贴着父元素的边。
• 给了固定宽高，但没写 margin 的话盒子会固定在左上角，因为 top 和 left 的优先级更高。
• 给了 margin: auto; 的话，浏览器会自动填充边距，令其居中。
• 此种实现方式优点是兼容性很好，几乎没用到任何 CSS 的新特性，全部都是经典属性。

3. 小结

学会了绝对定位来进行居中之后，下一小节我们再来看一下绝对定位怎么和外边距进行搭配。