[分享]css中div垂直居中怎么设置

前端开发中，在页面布局中，通常用到div元素作为容器来包含各个模块。有时我们需要将这些div元素垂直居中来保持页面的美观，那么，下面我就来介绍一下如何在CSS中设置div元素的垂直居中。 首先，需要明...

前端开发中，在页面布局中，通常用到div元素作为容器来包含各个模块。有时我们需要将这些div元素垂直居中来保持页面的美观，那么，下面我就来介绍一下如何在CSS中设置div元素的垂直居中。
首先，需要明确的是，在不同的情况下，需要使用不同的方法来实现div元素的垂直居中。下面我将依次介绍这些方法。
一、使用display:flex布局
在CSS3中，引入了Flexbox布局，它可以非常简单地实现元素的垂直居中。我们只需要设置容器的display属性为flex，并设置justify-content属性为center，align-items属性为center，就能轻松实现元素的垂直居中。代码如下：

p {
  display: flex;
  justify-content: center;
  align-items: center;
} 

二、使用position属性
另一种实现div元素垂直居中的方法是使用position属性。我们可以将容器的position属性设置为absolute，并且将top和left属性都设置为50%。然后再设置一个负的margin值，使容器向上移动自身高度的一半。代码如下：

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

三、使用display:table属性
还有一种实现垂直居中的方法是使用display:table属性。我们可以将容器的display属性设置为table，并将子元素的display属性设置为table-cell，然后再将子元素的vertical-align属性设置为middle。这样就能实现元素的垂直居中。代码如下：

p {
  display: table;
}
p span {
  display: table-cell;
  vertical-align: middle;
} 

以上就是三种实现div元素垂直居中的方法。通过flex布局、position属性和display:table属性，我们可以轻松地实现元素的垂直居中，让页面看起来更加美观。