使用CSS实现垂直居中元素

能者

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

1. 使用flexbox布局:将父容器的display属性设置为flex，并使用align-items属性设置为center。这将使子元素在垂直方向上居中对齐。
[mw_shl_code=css,true]
.parent {
  display: flex;
  align-items: center;
}
[/mw_shl_code]

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

3. 使用表格布局:将父容器的display属性设置为table，并将子元素的display属性设置为table-cell。然后，使用vertical-align属性设置为middle来使元素垂直居中。
[mw_shl_code=css,true]
.parent {
  display: table;
}

.child {
  display: table-cell;
  vertical-align: middle;
}
[/mw_shl_code]

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

blurzzz

好评 支持 西苑很用用