[分享]css中怎么利用auto自动居中

CSS是样式定义语言的缩写，用于对网页进行排版和美化。在CSS中，经常会有需要居中的元素。其中，我们可以使用auto自动居中的方式来实现。 .example { : relative; left: 5...

CSS是样式定义语言的缩写，用于对网页进行排版和美化。在CSS中，经常会有需要居中的元素。其中，我们可以使用auto自动居中的方式来实现。

.example {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
} 

上面的代码可以用在需要水平居中的元素上，其中，position: relative;是为了让元素相对于父级进行定位，left: 50%;是将元素相对于父级左边缘移动50%，最后，transform: translateX(-50%);是将元素在水平方向上再向左移动50%。

.example {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

上面的代码可以用在需要垂直居中的元素上，其中，position: absolute;是为了将元素从文档流中拖出来进行定位，top: 50%;是将元素相对于父级上边缘移动50%，最后，transform: translateY(-50%);是将元素在垂直方向上再向上移动50%。

以上两种方式可以组合使用，在需要水平垂直居中的元素上都可以生效。只需要给元素添加position: absolute;然后给left和top分别赋值50%，再使用translateX和translateY属性即可。