html元素【垂直水平居中】方法合集

以下垂直水平居中的方法，都是div在body里垂直水平居中。

定位法

思路就是父元素设置相对定位，子元素设置绝对定位（父相子绝）；

子元素的左上角会被定位到父元素中心，这个时候再利用（负margin/负translate/cale函数）将子元素的中心校准到父元素的中心。

1. absolute + translate

最好用的定位居中，无需知晓子元素宽高，效果稳定

2. absolute + 负margin

这个方法的前提条件是：子元素宽高已知

3. absolute + calc函数

这个方法的前提条件是：子元素宽高已知

与（absolute + 负margin）方法非常类似

4. absolute + margin auto

此方法的前提条件是：子元素宽高已固定

否则会撑满父元素。不太常用

flex法

flex盒子具有很强的排列功能。

以下方法都不需要知晓子元素宽高

1. flex + margin auto

史上最简单，一行样式就实现了垂直水平居中。

2. flex + justify-content + align-items

这个方法利用了弹性盒设置内部元素的排列方式，横轴+侧轴双居中

表格法

display: table-cell

父元素转为表格元素，子元素转为行元素。

就可以使用表格的居中方式，来实现垂直水平居中