小技巧小经验之-----居中

本文主要是介绍小技巧小经验之-----居中，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

/*图片居中*/
<dl><dt><img src=""/><span></span></dt><dd></dd>
</dl>dt{height:100px;width:100px;text-align:center;}
dt span{ width:0;height:50%;display:inline-block;}
dt img{vertical-align:middle;}
/*span为参照物，只有inline-block类型可以用vertical-align这个属性*/
/*法二：*/
dt{height:100px;width:100px;text-align:center;}
dt span{width：0；height:100px;display:inline-block;vertical-align:middle;}
dt img{vertical-align:middle;}/*盒子居中*/
html:
<div class="fu"><div class="zi"></div>
</div>
css:/*法一*/
.fu{height:500px;width:400px;background:red; position:relative;}
.zi{height:100px;width:100px;background:blue;psition:absolute;left:50%;top:50%;margin:-50px 0 0 50px;}
/*法二*/
.fu{height:500px;width:400px;background:red; position:relative;}
.zi{height:100px;width:100px;background:blue;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}/zi盒子的宽高可以自定义无论多少他都会居中z(自适应居中)/

这篇关于小技巧小经验之-----居中的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---