CSS水平垂直居中的几种方法总结

CSS水平垂直居中的几种方法总结

CSS中实现水平垂直居中是前端开发者经常面对的一个问题。本文将总结几种实现方式，包括使用 position 属性、使用 display 属性等方式。

1.使用 position 属性实现垂直居中

使用position 属性可以通过设置 top 和 left 值来实现垂直和水平居中。

首先，在 CSS 中添加一个包含容器，将容器设置为相对定位。

.container{
   position:relative;
}

然后将要居中的元素设置为绝对定位，并设置其 top 和 left 值为50%，再设置其 margin-top 和 margin-left 为元素高和宽的一半，这样就可以实现元素的水平垂直居中。

.item{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-50px;
   margin-left:-50px;
}

其中，上述代码中的50px是元素的高和宽的一半。

2.使用 display 属性实现垂直居中

使用 display 属性可以将父元素设置为弹性容器，实现容器中的元素在垂直方向上的居中对齐。

首先，将容器设置为 display: flex。

.container{
   display: flex;
   align-items: center;
}

容器中的元素将默认使用 flex 布局，然后通过 align-items 属性设置元素的垂直居中。

使用此种方式，水平居中可以使用 text-align 等方式实现。

3.使用 table 属性实现垂直居中

使用 table 属性可以实现元素的水平垂直居中。

首先，将包含容器设置为 display: table；

.container{
   display: table;
}

然后，在容器中嵌套一个子元素，并设置子元素的 display 为 display: table-cell，vertical-align 属性设置居中对齐。

.container div{
   display: table-cell;
   vertical-align: middle;
}

总结

本文总结了 CSS 中实现水平垂直居中的几种方式：使用 position 属性、使用 display 属性和使用 table属性。

这些方法都有各自的优缺点，根据需要选择最适合自己情况的方法进行实现。

需要注意的是，实现水平垂直居中的方法基于元素已经知道尺寸（即宽和高），若元素是动态的，需要 JS 辅助实现。