使用CSS实现垂直居中元素

能者

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

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

[CSS] 纯文本查看 复制代码

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

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

[CSS] 纯文本查看 复制代码

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

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

[CSS] 纯文本查看 复制代码

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

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

blurzzz

好评 支持 西苑很用用