纯CSS实现垂直居中的9种方法

以下是“纯CSS实现垂直居中的9种方法”的完整攻略。

以下是“纯CSS实现垂直居中的9种方法”的完整攻略。

什么是垂直居中

当父元素的高度确定，子元素需要在父元素内垂直居中（即竖直方向上居中）时，我们称之为垂直居中。

9种纯CSS实现垂直居中方法

1. 使用text-align和line-height方法

父元素设置text-align: center;和line-height: 父元素高度;，子元素设置display: inline-block; vertical-align: middle;即可实现。

示例代码：

```html

```

css
.parent {
height: 200px;
text-align: center;
line-height: 200px;
}
.child {
display: inline-block;
vertical-align: middle;
}

1. 使用flex布局方法

父元素设置display: flex; justify-content: center; align-items: center;，子元素不用设置，即可实现。

示例代码：

```html

```

css
.parent {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}

1. 使用绝对定位和负边距方法

父元素设置position: relative;，子元素设置position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);，即可实现。

示例代码：

```html

```

css
.parent {
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

1. 使用绝对定位和margin负值方法

父元素设置position: relative;，子元素设置position: absolute; top: 50%; margin-top: -子元素高度的一半;，即可实现。

示例代码：

```html

```

css
.parent {
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 50%;
margin-top: -10px;
}

1. 使用绝对定位和margin:auto方法

父元素设置position: relative;，子元素设置position: absolute; top: 0; bottom: 0; margin:auto;，即可实现。

示例代码：

```html

```

css
.parent {
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}

1. 使用table-cell方法

父元素设置display: table-cell; vertical-align: middle;，子元素不用设置，即可实现。

示例代码：

```html

```

css
.parent {
height: 200px;
display: table-cell;
vertical-align: middle;
}

1. 使用grid布局方法

父元素设置display: grid; place-items: center;，子元素不用设置，即可实现。

示例代码：

```html

```

css
.parent {
height: 200px;
display: grid;
place-items: center;
}

1. 使用伪元素方法

父元素设置position: relative;，子元素设置position: absolute; top: 50%; transform: translateY(-50%);，并添加一个::before伪元素，使其占据padding-top的空间即可。

示例代码：

```html

```

css
.parent {
height: 200px;
position: relative;
padding-top: 50%;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.child::before {
content: "";
display: block;
height: 0;
}

1. 使用变量方法

使用CSS变量定义父元素及子元素高度的一半，并分别使用calc函数计算即可。

示例代码：

```html

```

css
.parent {
--height: 200px;
height: var(--height);
display: flex;
justify-content: center;
align-items: center;
}
.child {
--height: 20px;
height: calc(var(--height) * 2);
}

以上就是“纯CSS实现垂直居中的9种方法”的完整攻略，可以根据需要选择实现方式。