以下是“纯CSS实现垂直居中的9种方法”的完整攻略。
什么是垂直居中
当父元素的高度确定,子元素需要在父元素内垂直居中(即竖直方向上居中)时,我们称之为垂直居中。
9种纯CSS实现垂直居中方法
- 使用
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;
}
- 使用flex布局方法
父元素设置display: flex; justify-content: center; align-items: center;
,子元素不用设置,即可实现。
示例代码:
```html
```
css
.parent {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
- 使用绝对定位和负边距方法
父元素设置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%);
}
- 使用绝对定位和margin负值方法
父元素设置position: relative;
,子元素设置position: absolute; top: 50%; margin-top: -子元素高度的一半;
,即可实现。
示例代码:
```html
```
css
.parent {
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 50%;
margin-top: -10px;
}
- 使用绝对定位和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;
}
- 使用table-cell方法
父元素设置display: table-cell; vertical-align: middle;
,子元素不用设置,即可实现。
示例代码:
```html
```
css
.parent {
height: 200px;
display: table-cell;
vertical-align: middle;
}
- 使用grid布局方法
父元素设置display: grid; place-items: center;
,子元素不用设置,即可实现。
示例代码:
```html
```
css
.parent {
height: 200px;
display: grid;
place-items: center;
}
- 使用伪元素方法
父元素设置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;
}
- 使用变量方法
使用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种方法”的完整攻略,可以根据需要选择实现方式。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯CSS实现垂直居中的9种方法 - Python技术站