css中图片使用绝对定位实现居中效果[第二篇]

昨天在知乎上各种看前端的贴，一不小心又学到了个技巧，再次我搬过来和大家分享。

还是同样的问题：

如何让一个div在父元素中居中？

在上一篇里我们用到了绝对定位position:absolute;

再结合margin的负值实现了居中的效果。

第二种解决办法

在此我们来看下新的方法：

　　html:

　　　　<div class="container">

　　　　　　<div class="box"></div>

　　　　</div>

　　css:

　　　　.container{

　　　　　　width:300px;

　　　　　　height:300px;

　　　　　　position:relative;

　　　　}

　　　　.box{

　　　　　　width:50px;

　　　　　　height:50px;

　　　　　　margin:auto;

　　　　　　position:absolute;

　　　　　　top:0;

　　　　　　bottom:0;

　　　　　　left:0;

　　　　　　right:0;

　　　　}

这样就实现啦！(●'◡'●)

原理

之前什么margin都不用算啦！这个方法直接搞定居中问题。

我们给box设置了绝对定位，上下左右都是0；

这时box就懵逼了，到底往哪走？？？

算了，我还是待在中间吧QAQ

仔细想想还突然觉得这个box很可爱呢，哈哈哈。