标签：
原理：块级元素想要在页面水平和垂直方向都居中:先让元素定位(绝对定位)，然后水平方向上面:left=50%,margin-left=-(1/2*width)
垂直方向页面居中:top=50%,margin-top=-(1/2*height)
代码如下:
<div class="footer_top">
<div class="footer_slogen">
<span class="one"><img src="images/slogen1.png" alt=""/></span>
<span class="two"><img src="images/slogen2.png" alt=""/></span>
<span class="three"><img src="images/slogen3.png" alt=""/></span>
<span class="four"><img src="images/slogen4.png" alt=""/></span>
</div>
<div class="footer_product"></div>
</div>
.footer_top{
position: relative;
}
.footer_slogen span{
position: absolute;
left: 50%;
}
.footer_slogen .one{
margin-left: -605px;
}
.footer_slogen .two{
margin-left: -294px;
}
.footer_slogen .three{
margin-left: 0px;
}
.footer_slogen .four{
margin-left: 316px;
}
注意：(1)、在绝对定位后，没有给lrtb值，默认会以原来的标准流中的位置显示。
(2)、关于四个图形的层级都一样叠加在了一起（只有相对定位和绝对定位和固态定位的元素才有层级的概念,浮动和标准流是没有层级的概念的,如果定位了几个相邻的元素在同一个位置
后面的元素会压在前面的元素上面，但是z-index都是0）
(3)、在百分比定位里，没有margin-right的用法
多个块级元素在水平方向占位置，实现在窗口变大变小的同时，四个图片依然会随之而动，从而显示响应式的效果
标签：
原文地址：http://www.cnblogs.com/zhengqiu/p/5739045.html
