[分享]css不重复位置居中

在CSS中，经常需要将元素居中显示。使用margin:auto可以实现水平居中，但对于垂直居中，却需要借助一些技巧。一种常见的垂直居中方法是使用绝对定位。父元素需要设置:relative，子元素需要设...

在CSS中，经常需要将元素居中显示。使用margin:auto可以实现水平居中，但对于垂直居中，却需要借助一些技巧。

一种常见的垂直居中方法是使用绝对定位。父元素需要设置position:relative，子元素需要设置position:absolute。然后通过top和left属性，分别设置距离顶部和左侧的距离，并通过transform属性将元素上移50%。最后，通过设置负的margin-top，使元素居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -50px; /* 元素高度的一半 */
} 

但是这种方法有一个问题，就是父元素的高度不能动态变化，否则子元素的位置就会出现偏移。因此，有一种更加灵活的方法可以解决这个问题。

这种方法是使用flex布局。将父元素设置为display:flex，然后将子元素设置为margin:auto即可实现水平垂直居中。需要注意的是，父元素的高度需要设置为100%。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.child {
  margin: auto;
} 

该方法的优点是适用于各种高度并且非常简洁，缺点是不支持旧版浏览器。