css中怎样让div垂直居中显示

在CSS中，让一个div垂直居中显示看起来很简单，但实际上实现起来有一些技巧。在这里，我们会提供几种实现div垂直居中的方法。

方法1：
<div class="wrapper">
   <div class="box">这是一个盒子</div>
</div>

CSS：
.wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
}
.box {
   margin: auto;
   width: 50%;
   height: 50%;
   text-align: center;
   background-color: #333;
   color: #fff;
} 

这种方法使用flexbox布局，通过justify-content和align-items属性设置水平和垂直方向都居中对齐。为了让内容居中，我们使用margin:auto。然后，我们设置盒子的宽度和高度，并给它一个背景色和文字颜色。

方法2：
<div class="wrapper">
   <div class="box">这是一个盒子</div>
</div>

CSS：
.wrapper {
   position: relative;
   height: 100%;
}
.box {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   width: 50%;
   height: 50%;
   text-align: center;
   background-color: #333;
   color: #fff;
} 

这种方法使用绝对定位和transform属性实现盒子居中。首先，我们给外部容器设置一个相对定位并占满整个视口。然后，我们将盒子进行绝对定位，并使用top和left属性将其放置在容器的中央。接下来，我们使用transform属性对其进行微调，让它在水平和垂直方向都居中。最后，我们设置盒子的宽度和高度，并给它一个背景色和文字颜色。

通过上述两种方法，我们可以很容易实现div垂直居中的效果。