水平垂直居中
2016-06-02 14:41 改吧 阅读(376) 评论(0) 编辑 收藏 举报1.img在div里面水平垂直居中<div><img/></div>
a.img设置成block,计算margin的值
b.div{width:200px;height:200px;display:table-cell;vertical-align:middle;text-align:center}
img{vertical-align:middle}
c.background:url() no-repeat center center;
2.div在div里面水平垂直居中<div id="parent"><div id="child"></div></div>
a.#parent{width:num;height:num;display:table;}#child{display:table-cell;vertical-align:middle;text-align:middle}
b.(需要子元素给固定的宽高)
#parent{width:300px;height:300px;position:relative}#child{width:100px;height:100px;position:relative;top:50%;left:50%;margin-left:-50px;margin-top:-50px;}
c.(需要子元素给固定的宽高)
#parent{width:300px;height:300px;position:relative}#child{width:100px;height:100px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
d.#parent{width:300px;height:300px;position: relative;}#child{position: absolute;width:auto;height: auto;border:1px red solid;top:50%;left:50%;transform:translate(-50%,-50%);}
3.上面一个图片下面一个解释<div><img /><p></p></div>
![](https://dn-shimo-image.qbox.me/eCTsRHF2Rm8hHhrf.png!thumbnail)
a.div{text-align:center;}
4.
![](https://dn-shimo-image.qbox.me/aFW9wiHFfqMW3usN.png!thumbnail)
<li><i></i><span></span></li>图标与span元素垂直居中对齐
i:display:inline-block;vertical-align:super I标签的高度要跟li的高度一致
span:display:inline-block;vertical-align:top;overflow:hidden;或者line-height:li的高度
5.<div><span></span></div>span变成inline-block;
a.div{display:table-cell;vertical-align:middle;text-align:text;}
span{display:inline-block;ver-align:middle;width:50px;height:50px;}
6.margin和width实现水平居中:
width:固定宽度; margin:0 auto;