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

2019独角兽企业重金招聘Python工程师标准>>>

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

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

html代码：

<div class="slogen">

 <span class="item slogen1">

  <img src="image/home/slogen1.png">

 </span>

 <span class="item slogen2">

  <img src="image/home/slogen2.png">

 </span>

  <span class="item slogen3">

   <img src="image/home/slogen3.png">

  </span>

  <span class="item slogen4">

   <img src="image/home/slogen4.png">

  </span>

</div>

在最外层设置一个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;

 

 

转载于:https://my.oschina.net/u/2971691/blog/880809