水平垂直居中

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>

 

a.div{text-align:center;}

4.

<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;