能者 发表于 2023-9-23 14:00:01

使用CSS实现垂直居中元素

要使用CSS实现垂直居中元素,可以尝试以下方法:

1. 使用flexbox布局:将父容器的display属性设置为flex,并使用align-items属性设置为center。这将使子元素在垂直方向上居中对齐。

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


2. 使用绝对定位和transform:将元素的position属性设置为absolute,并使用top、left、bottom和right属性同时设置为0。然后,使用transform属性并将其值设置为translateY(-50%),将元素相对于父容器垂直居中。

.child {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}


3. 使用表格布局:将父容器的display属性设置为table,并将子元素的display属性设置为table-cell。然后,使用vertical-align属性设置为middle来使元素垂直居中。

.parent {
display: table;
}

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


以上是几种常用的实现垂直居中元素的方法。根据具体情况,你可以选择适合你需求的方法来使用CSS实现。

blurzzz 发表于 2023-9-23 14:47:04

好评 支持 西苑很用用
页: [1]
查看完整版本: 使用CSS实现垂直居中元素