CSS是样式定义语言的缩写,用于对网页进行排版和美化。在CSS中,经常会有需要居中的元素。其中,我们可以使用auto自动居中的方式来实现。 .example { position: relative;
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属性即可。
粉丝
0
关注
0
收藏
0