css垂直水平居中的方法

2024年2月8日发(作者：)

css垂直水平居中的方法

CSS垂直水平居中的方法：

1、绝对定位+负margin法：

使用绝对定位，把元素定位在用户指定位置，offsetTop和offsetLeft分别指定离顶部和左边的距离，同时用负margin绝对居中。

2、绝对定位法：使用绝对定位，将元素定位在用户指定的位置，用top，right，bottom和left来指定离顶部，右边，底部和左边的距离。这种方法不需要计算，但有可能导致父容器的大小被忽略。

3、相对定位法：使用相对定位，使元素和其父容器进行定位，用position:

relative来定位，top，right，bottom和left来指定元素与其父元素的距离。这种居中方式既可以让元素和父容器相对定位，又能拥有父元素的特性，可以非常方便地实现垂直和水平居中。

4、绝对定位+偏移量法：使用绝对定位，把元素定位在用户指定位置，计算它的offsetWidth和offsetHeight将两个值除以2，用偏移量减去除以2的结果，最终的结果就是使元素实现水平垂直居中，但比较麻烦。

5、transform法：使用transform中的translate，translateX和translateY，来指定元素的位置，用 -50% 0% 来把元素水平居中，-50% 0% 来把元素垂直居中，把他们放一起就可以实现水平垂直居中了。

6、flexbox法：使用flexbox把元素定位，设置元素的父元素的display为 flex，子元素默认横向排列，设置子元素的align-items，justify-content，两个属性分别为center和center，即可实现水平垂直居中。

7、表格法：使用table的display：table，table-cell的display：table-cell和vertical-align让元素垂直居中，而使用表格的text-align让元素水平居中，结合起来就可以实现水平垂直居中了。