[分享]css3怎么水平垂直居中

CSS3是一种广泛使用的网页样式语言，它具有很强的灵活性和可扩展性。其中，水平垂直居中是一个常用且重要的布局技巧，在这篇文章中我们将会介绍如何用CSS3实现水平垂直居中。对于一个元素，要做到水平居中，...

CSS3是一种广泛使用的网页样式语言，它具有很强的灵活性和可扩展性。其中，水平垂直居中是一个常用且重要的布局技巧，在这篇文章中我们将会介绍如何用CSS3实现水平垂直居中。

对于一个元素，要做到水平居中，我们可以设置其margin-left和margin-right为auto，如下：

.element {
  width: 200px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
} 

这样，该元素就会在其父级容器中水平范围中居中。但是，要实现垂直居中则不是这样简单，我们需要一些其他的CSS技巧来达到目的。

方法一：使用position和transform属性，如下代码：

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

通过将该元素的position属性设置为absolute，并设置top和left为50%来保证元素在父级容器中的垂直水平范围中心。但是，这会导致元素左上角到父级容器的左上角并不在中心位置，因此我们需要使用transform属性进行微调，将元素的中心移到父级容器的中心。这样就实现了水平垂直居中。

方法二：使用flexbox布局，如下代码：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.element {
  width: 200px;
  height: 100px;
} 

通过将该父级容器的display属性设置为flex，我们可以使用flexbox布局实现垂直水平居中。通过设置justify-content和align-items属性来控制元素在flexbox容器中的位置。这种方法既简单又有效，但是有些低版本浏览器不支持flexbox布局。

以上就是两种实现CSS3水平垂直居中的方法，你可以选择其中任意一种方法进行使用，以达到你想要的页面效果。