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

来源:互联网 发布:防蹭网软件怎么用 编辑:程序博客网 时间:2024/05/01 03:30
/*图片居中*/<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(自适应居中)/

1 0