[分享]css中实现元素垂直水平居中

CSS中实现元素垂直水平居中需要掌握一些技巧，下面将介绍两种方法。

方法一：使用flex布局

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

以上代码中，将需要垂直水平居中的元素放入一个容器中，在容器上设置display:flex，这样就可以通过justify-content:center和align-items:center来实现元素的垂直水平居中。

方法二：使用相对定位和负边距

.container{
  position: relative;
}

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

以上代码中，也是将需要垂直水平居中的元素放入一个容器中，然后在容器上设置position:relative，元素的样式中设置position:absolute、top:50%、left:50%。这样就可以将元素的左上角移动到容器的中心位置，但是此时元素的中心坐标并不在容器的中心，需要通过transform:translate(-50%,-50%)来将元素中心坐标移动到容器中心位置，实现垂直水平居中。

以上两种方法都可以实现元素的垂直水平居中，可以根据实际情况选择使用。