如果没有绝对定位，只需要设置margin：0 auto就可以是盒子实现水平垂直居中。但是如果设置了绝对定位，margin：0 auto就没有效果了，那此时又该怎么实现呢？
先来看一个例子，实现如下图的效果，“多 品类齐全轻松购物”，“快 多仓直发，极速配送”，“好 正品行货 精致服务”，“省 天天低价 畅选无忧”分别是由4张图片组成的。如何让着4张图片按下图显示呢？
html代码：
在最外层设置一个div，在div里面设置4个span，每个span里面放置img标签。来放置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设置绝对定位，根据子绝父相，对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;
