css实现水平垂直居中
时间: 2023-09-24 14:05:46 浏览: 97
css水平垂直居中
好的,关于CSS实现水平垂直居中,常见的方法有以下几种:
1.使用flex布局
如果父元素使用flex布局可以通过以下代码实现水平垂直居中:
```css
.parent {
display: flex;
justify-content: center;
align-items: center;
}
```
2.使用绝对定位+transform
通过设置子元素的绝对定位和transform属性可以实现水平垂直居中:
```css
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```
3.使用table布局
使用table布局方式可以通过以下代码实现垂直水平居中:
```css
.parent {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.child {
display: table-cell;
vertical-align: middle;
}
```
以上是三种CSS实现水平垂直居中的方法,你可以根据具体情况选择合适的方式。希望这能够帮到你。
阅读全文