CSS 垂直水平居中的5种 解决方案

CSS 垂直水平居中问题一直是前端开发中的难点之一。不同的布局方式和需求，需要采用不同的方案来实现垂直居中和水平居中。本文将介绍5种 解决方案，为大家提供参考。

1. 使用Flexbox布局方式

在Flexbox布局方式下，只需要在父元素上设置display: flex，即可实现垂直和水平居中。如下所示：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

以上代码将子元素垂直、水平居中。其中，justify-content属性控制子元素的水平对齐方式，执行居中；align-items属性控制子元素的垂直对齐方式，执行居中。

2. 使用绝对定位

将子元素设置为绝对定位，然后设置left，right，top，bottom属性为0，即可实现垂直和水平居中。如下所示：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

以上代码将子元素水平和垂直都居中。子元素的left，right，top属性设置为0，填满父元素。设置margin的值为auto，消除子元素宽高，居中位置就可以实现。

3. 使用表格布局

使用表格布局，将子元素放在表格中心单元格中，即可实现水平和垂直居中。如下所示：

.parent {
  display: table;
}

.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

以上代码将子元素垂直和水平都居中。在表格布局中，将父元素设置为display:table，子元素设置为display:table-cell，通过text-align和vertical-align实现居中。

4. 使用translate方法

translate()方法可以将元素的位置在水平和垂直方向上平移，因此，通过translate(-50%,-50%)即可实现垂直和水平居中。如下所示：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

以上代码将子元素垂直和水平都居中。将父元素设置为position:relative，子元素设置为position:absolute，在子元素中设置top，left，transform属性为50%及translate方法，实现居中。

5. 使用Grid布局方式

在Grid布局方式下，只需要在父元素上设置display: grid，然后设置grid-template-rows和grid-template-columns属性来控制子元素的行和列，即可实现垂直和水平居中。如下所示：

.parent {
  display: grid;
  align-items: center;
  justify-content: center;
}

.child {
  grid-row: 2;
  grid-column: 2;
}

以上代码将子元素垂直和水平都居中。其中，align-items和justify-content属性分别控制垂直和水平的对齐方式，子元素的grid-row和grid-column属性控制子元素的行和列。

总结

本文介绍了五种 解决方案，如Flexbox布局、绝对定位、表格布局、translate方法以及Grid布局。它们各有优缺点，根据不同的布局方式和需求，选择合适的方案来解决垂直和水平居中问题。