[分享]css中实现元素垂直水平居中显示

CSS中实现元素垂直水平居中显示是前端开发中很常见的需求，下面将介绍几种实现方式。1. 绝对定位+负边距使用绝对定位的方式，需要将元素的宽高确定，使用负边距来居中，如下所示：.container { ...

CSS中实现元素垂直水平居中显示是前端开发中很常见的需求，下面将介绍几种实现方式。

1. 绝对定位+负边距

使用绝对定位的方式，需要将元素的宽高确定，使用负边距来居中，如下所示：

.container {
  position: relative;
  height: 400px;
}

.box {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
} 

2. flex布局

使用flex布局可以很方便地实现元素的垂直水平居中：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
}
.box {
  width: 200px;
  height: 100px;
} 

3. grid布局

使用grid布局同样可以轻松实现垂直水平居中：

.container {
  height: 400px;
  display: grid;
  place-items: center;
}

.box {
  width: 200px;
  height: 100px;
} 

使用以上三种方式都可以很方便地实现元素的垂直水平居中显示，其中flex布局和grid布局是CSS3新增的布局方式，使用起来更加优雅方便。