[分享]css元素垂直居中的三种方法

CSS中的元素垂直居中是Web开发中的常见需求。然而，实现起来却并不容易。在本文会介绍三种常用的方法。方法一：使用flexbox .container { display: flex; justify...

CSS中的元素垂直居中是Web开发中的常见需求。然而，实现起来却并不容易。在本文会介绍三种常用的方法。

方法一：使用flexbox
.container {
  display: flex;
  justify-content: center;
  align-items: center;
} 

这种方法使用了CSS3中的flexbox布局。通过给包含块元素（即.container）设置display:flex，就可以让容器的子元素在垂直方向上居中。在这个例子中，align-items:center实现了垂直居中。

方法二：使用绝对定位
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

这种方法使用了CSS的绝对定位。首先，需要给容器（即.parent）设置position:relative。然后，给要居中的元素（即.child）设置position:absolute，并且通过top:50%将它的上边距移到了容器的中间位置。最后，使用transform:translateY(-50%)将元素上移自身高度的50%，以达到垂直居中的效果。

方法三：使用表格布局
.container {
  display: table-cell;
  vertical-align: middle;
} 

这种方法使用了CSS中的表格布局。将元素的display属性设置为table-cell，然后使用vertical-align:middle来实现垂直居中。这种方法比较简单，但是可能会影响到页面的布局。

以上三种方法中，使用flexbox是最流行的方法。使用绝对定位可以在一些特殊场景下发挥作用，而使用表格布局时需要考虑到潜在的布局问题。选择一种最适合你的方法，让你的元素在垂直方向上居中！