当前位置: 开发笔记 > 程序员 > 正文

绝对定位的盒子如何实现水平垂直居中

作者：只喝大瓶的雪碧 | 来源：互联网 | 2023-05-17 04:43

如果没有绝对定位，只需要设置margin：0auto就可以是盒子实现水平垂直居中。但是如果设置了绝对定位，margin：0auto就没有效果了，那此时又该怎么实现呢？先来看一个例子，实现如下图的效

如果没有绝对定位，只需要设置margin：0 auto就可以是盒子实现水平垂直居中。但是如果设置了绝对定位，margin：0 auto就没有效果了，那此时又该怎么实现呢？

先来看一个例子，实现如下图的效果，“多品类齐全轻松购物”，“快多仓直发，极速配送”，“好正品行货精致服务”，“省天天低价畅选无忧”分别是由4张图片组成的。如何让着4张图片按下图显示呢？

在最外层设置一个div，在div里面设置4个span，每个span里面放置img标签。来放置4张图片

css代码

.slogen{

height: 54px;

padding: 20px 0;

background-color: #F5F5F5;

position: relative;

}

.item{

width: 302px;

position: absolute;

top: 20px;

left:50%;

}

.slogen1{

margin-left: -608px;

}

.slogen2{

margin-left: -304px;

}

.slogen3{

margin-left: 2px;

}

.slogen4{

margin-left: 304px;

}

这里我们需要对span设置绝对定位，根据子绝父相，对span的父元素div设置相对定位，并设置div的高度，背景颜色，边框。4个span有共同的样式，这里设置了公共类item包括宽度，绝对定位，向上距离20px, left设置为50%。

盒子是以中间的为界居中，通过设置margin-left确定图片的位置。那么左侧图片的margin-left为负值。我们从左至右将图片编号为1，2，3，4.每张图片之间设置2px间距，图片1需要设置margin-left为父元素宽度的2倍即是-604px，加上间距2*2，即为-608px。同理图片2需要设置margin-left为父元素宽度，加上间距，即为-304px;右侧图片margin-left为正值。图片3设置margin-left为间距 2px; 图片4设置margin-left:为父元素宽度，加上间距2px, 即为304px;