如何用CSS实现元素竖直居中

CSS可以实现元素的水平居中和垂直居中，但垂直居中相对于水平居中稍微有些麻烦。在本文中，我会从几个角度来阐述如何使用CSS实现元素竖直居中。

一、使用display:flex

CSS3中的flex布局非常方便，可以通过一些简单的设置轻松实现元素的竖直居中。通过设置包裹元素的display属性为flex，并且设置子元素的align-items属性为center，就可以实现子元素的竖直居中。

<div class="wrapper">
  <div class="centered">我被居中了</div>
</div>

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  background: #f1f1f1;
}

.centered {
  text-align: center;
  font-size: 48px;
}

二、使用position和transform

另一种方式是使用position和transform属性来实现竖直居中。通过设置元素的position属性为absolute，并且设置top和left属性为50%，再使用transform:translate来将元素向上移动自身高度的一半，就可以实现元素的竖直居中。

<div class="wrapper">
  <div class="centered">我被居中了</div>
</div>

.wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  background: #f1f1f1;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 48px;
}

三、使用display:table和display:table-cell

最后一种方式是使用display:table和display:table-cell属性来实现竖直居中。通过将包裹元素设置display:table，在内部元素设置display:table-cell和vertical-align:center，就可以实现元素的竖直居中。

<div class="wrapper">
  <div class="centered">我被居中了</div>
</div>

.wrapper {
  display: table;
  width: 100%;
  height: 200px;
  background: #f1f1f1;
}

.centered {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  font-size: 48px;
}

这三种方式都可以实现元素的竖直居中，具体使用哪一种方式可以根据不同情况进行选择。其中，flex布局是CSS3新特性，需要考虑兼容性问题；position和transform方式不需要使用额外的标签；display:table和display:table-cell的方式比较老旧。总的来说，使用flex布局是比较推荐的方式。 在实际的开发中，元素的竖直居中是非常常见的需求，掌握几种方法可以更轻松地完成工作。