手把手教你CSS水平、垂直居中的10种方式(小结)

在Web开发中，CSS水平、垂直居中是一个常见的问题。本攻略将介绍10种实现CSS水平、垂直居中的方式，包括使用flexbox、grid、绝对定位、transform等方法。

1. 使用flexbox

使用flexbox可以轻松实现CSS水平、垂直居中。例如：

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

上述代码将设置容器元素为flex布局，并将子元素水平、垂直居中。

2. 使用grid

使用grid也可以实现CSS水平、垂直居中。例如：

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

上述代码将设置容器元素为grid布局，并将子元素水平、垂直居中。

3. 使用绝对定位

使用绝对定位可以将元素相对于父元素进行定位。例如：

.container {
  position: relative;
}

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

上述代码将设置容器元素为相对定位，子元素为绝对定位，并将子元素水平、垂直居中。

4. 使用transform

使用transform可以对元素进行旋转、缩放、平移等操作。例如：

.container {
  position: relative;
}

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

上述代码将设置容器元素为相对定位，子元素为绝对定位，并将子元素水平、垂直居中。

5. 使用text-align和line-height

使用text-align和line-height可以实现行内元素的水平、垂直居中。例如：

.container {
  height: 200px;
  line-height: 200px;
  text-align: center;
}

上述代码将设置容器元素的高度为200像素，行高为200像素，并将文本水平、垂直居中。

6. 使用table-cell

使用table-cell可以将元素作为表格单元格进行布局。例如：

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

上述代码将设置容器元素为表格单元格布局，并将文本水平、垂直居中。

7. 使用margin

使用margin可以将元素相对于父元素进行定位。例如：

.container {
  position: relative;
}

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

上述代码将设置容器元素为相对定位，子元素为绝对定位，并将子元素水平、垂直居中。

8. 使用calc

使用calc可以进行数学计算。例如：

.container {
  position: relative;
}

.child {
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 50px);
}

上述代码将设置容器元素为相对定位，子元素为绝对定位，并将子元素水平、垂直居中。

9. 使用grid-template-areas

使用grid-template-areas可以将元素放置在指定的区域内。例如：

.container {
  display: grid;
  grid-template-areas: "center";
  justify-content: center;
  align-items: center;
}

.child {
  grid-area: center;
}

上述代码将设置容器元素为grid布局，并将子元素放置在中心区域。

10. 使用伪元素

使用伪元素可以在元素内部创建一个新的元素。例如：

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.child span {
  display: inline-block;
  vertical-align: middle;
}

上述代码将设置容器元素为相对定位，子元素为绝对定位，并将子元素水平、垂直居中。

示例说明

以下是两个示例：

示例1：使用flexbox制作一个水平、垂直居中的盒子

假设一个用户需要使用flexbox制作一个水平、垂直居中的盒子，可以按照以下步骤操作：

1. 在HTML文件中，创建一个盒子元素。例如：

<div class="container">
  <div class="child">Hello World</div>
</div>

上述代码将创建一个包含Hello World文本的盒子元素。

1. 在CSS文件中，使用flexbox将盒子元素水平、垂直居中。例如：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #ccc;
}

.child {
  background-color: #fff;
  padding: 20px;
}

上述代码将设置容器元素为flex布局，并将子元素水平、垂直居中。

示例2：使用grid制作一个水平、垂直居中的图片

假设一个用户需要使用grid制作一个水平、垂直居中的图片，可以按照以下步骤操作：

1. 在HTML文件中，创建一个图片元素。例如：

<div class="container">
  <img src="image.jpg" alt="image">
</div>

上述代码将创建一个包含图片的盒子元素。

1. 在CSS文件中，使用grid将盒子元素水平、垂直居中。例如：

.container {
  display: grid;
  place-items: center;
  height: 200px;
  background-color: #ccc;
}

img {
  max-width: 100%;
  max-height: 100%;
}

上述代码将设置容器元素为grid布局，并将子元素水平、垂直居中。