如果沒有絕對定位涤伐，只需要設(shè)置margin：0 auto就可以是盒子實(shí)現(xiàn)水平垂直居中。但是如果設(shè)置了絕對定位，margin：0 auto就沒有效果了烤咧，那此時(shí)又該怎么實(shí)現(xiàn)呢？
先來看一個(gè)例子抢呆，實(shí)現(xiàn)如下圖的效果煮嫌，“多 品類齊全輕松購物”，“快 多倉直發(fā)抱虐，極速配送”立膛，“好 正品行貨 精致服務(wù)”，“省 天天低價(jià) 暢選無憂”分別是由4張圖片組成的梯码。如何讓著4張圖片按下圖顯示呢宝泵？
html代碼：
在最外層設(shè)置一個(gè)div，在div里面設(shè)置4個(gè)span轩娶，每個(gè)span里面放置img標(biāo)簽儿奶。來放置4張圖片
.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設(shè)置絕對定位，根據(jù)子絕父相鳄抒，對span的父元素div設(shè)置相對定位闯捎，并設(shè)置div的高度，背景顏色许溅，邊框瓤鼻。4個(gè)span有共同的樣式，這里設(shè)置了公共類item包括寬度贤重，絕對定位茬祷，向上距離20px,left設(shè)置為50%。
盒子是以中間的為界居中并蝗，通過設(shè)置margin-left確定圖片的位置祭犯。那么左側(cè)圖片的margin-left為負(fù)值秸妥。我們從左至右將圖片編號為1，2沃粗，3粥惧，4.每張圖片之間設(shè)置2px間距，圖片1需要設(shè)置margin-left為父元素寬度的2倍即是-604px最盅，加上間距2*2突雪，即為-608px。同理圖片2需要設(shè)置margin-left為父元素寬度涡贱，加上間距挂签，即為-304px;右側(cè)圖片margin-left為正值。圖片3設(shè)置margin-left為間距2px;圖片4設(shè)置margin-left:為父元素寬度盼产，加上間距2px,即為304px;
