[分享]css中h5垂直居中

CSS中的H5垂直居中有很多种方法，下面介绍几种常用的方法。方法一： 使用lineheight和height，将height值设为使用标签所在的容器的高度，lineheight的值设为该高度值的一半，...

CSS中的H5垂直居中有很多种方法，下面介绍几种常用的方法。

方法一：
使用line-height和height，将height值设为使用标签所在的容器的高度，line-height的值设为该高度值的一半，如下所示：

.container{
   height:100px;
   line-height:100px;
 }
h5{
  display:inline-block;
  vertical-align:middle;
} 

通过将H5元素的display属性设为inline-block，并使其与其容器垂直居中对齐的方法，H5元素将位于其容器的中央。

方法二：
使用flex布局，通过将容器的display属性设为flex，并指定justify-content和align-items属性来实现垂直居中，如下所示：

.container{
  display:flex;
  justify-content:center;
  align-items:center;
}
h5{
  display:inline-block;
} 

通过这种方法，容器中的任何HTML元素都可以垂直居中。

方法三：
使用绝对定位，如下所示：

.container{
  position:relative;
}
h5{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
} 

在这种情况下，H5元素在其容器中的垂直居中取决于父容器的高度。

无论哪种方法，都可以实现CSS中H5元素的垂直居中，可以根据实际需要选择其中一种。