[分享]css3怎么垂直居中

CSS3可以通过不同的方式垂直居中元素，这里介绍其中两种常用的方法。第一种方法是使用flexbox布局。将需要居中的元素包裹在一个父级容器中，然后设置父级容器的display属性为flex，并使用ju...

CSS3可以通过不同的方式垂直居中元素，这里介绍其中两种常用的方法。

第一种方法是使用flexbox布局。将需要居中的元素包裹在一个父级容器中，然后设置父级容器的display属性为flex，并使用justify-content和align-items属性将子元素水平和垂直居中。

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

.child {
  /*样式*/
} 

第二种方法是使用绝对定位和transform属性。同样是将需要居中的元素包裹在一个父级容器中，然后使用绝对定位将子元素定位在父级容器中心，最后使用translate属性将子元素上下平移一半高度，使其垂直居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*样式*/
} 

这两种方法都可以实现垂直居中，选择哪种方法取决于具体情况。需要注意的是，在使用第二种方法时，父级容器要先设置position属性为relative才能使用绝对定位。