标签：style http io os 使用 ar strong sp div
水平居中(2)
方式一：text-align:center
适用类型：行级元素
方式二：margin:0 auto;
适用类型：块级元素
垂直居中(7)
方式一：line-height
适用：内联、块级
场景：单行文本垂直居中
html:
<div id="parent"> <div id="child">Content here</div></div>
css:
#child {line-height: 200px;}
方式二：vertival-align:middle
适用：内联、表格、块级（需要特殊处理）
场景一：用于内联元素
下面以图像的垂直对齐。
css:
img{ vertical-align:middle;}
html:
<div> <img src="http://pic2.58.com/ui7/job/hire/pic4.png" />看看我的位置</div>
场景二：用于表格
vertical-align属性可以直接用于表格单元格，效果相当于HTML中的valign属性。
css:
td{ height:40px; vertical-align:middle;}
html:
<table> <tr> <td>这是一个测试</td> <td>这是一个测试</td> </tr> <tr> <td>这是一个测试</td> <td>这是一个测试</td> </tr></table>
场景三：用于块元素
vertical-align属性是不适用于块元素的，这就是为什么有些人使用vertical-align属性无效的原因。但是我们可以使用display属性，设置其值为table-cell，将块元素转化为单元格，然后再使用vertical-align属性。
css：
div{ width:500px; height:200px; border:1px blue solid; display: table-cell; vertical-align: middle;}
html:
<div> <img src="http://pic2.58.com/ui7/job/hire/pic4.png" /></div>
需要注意的是，上面这种方法是存在兼容性问题的。IE6/IE7以及以IE为核心的浏览器如世界之窗、360、遨游等浏览器不支持这种用法，而Chrome、火狐却能支持。
为了兼容ie6/7可以为div添加以下属性
css:
div{ *display:block; *font-size:175px; /*高度为200px， 则200*0.873约为175px* 撑开/ }
场景四：通用
html:
<div id="parent"> <div id="child">Content here</div></div>
css:
#parent { display: table;}#child { display: table-cell; vertical-align: middle;}
低版本 IE fix bug：
#child { display: inline-block;}
方式三：position:absolute和margin：-x%;
适用：块级
场景：
html
<div id="parent"> <div id="child">Content here</div></div>
css
#parent { position: relative;}#child { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -15% 0 0 -25%;}
方式四：display:absolute和margin:auto
适用：通用（IE7-不正常）
css
#parent {position: relative;}#child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin: auto;}
html
<div id="parent"> <div id="child">Content here</div></div>
方式五：padding-top和padding-bottom相等
适用：通用
html
<div id="parent"> <div id="child">Content here</div></div>
css
#parent {padding: 5% 0;}#child {padding: 10% 0;}
方式六：float
适用：通用
html
<div id="parent"> <div id="floater"></div> <div id="child">Content here</div></div>
css
#parent{ height:250px; border:1px solid #F00;}#floater{ float:left; height:50%; width:100%; margin-bottom:-50px;}#child{ clear:both; height:100px;}
标签：style http io os 使用 ar strong sp div
原文地址：http://www.cnblogs.com/eli01/p/3993418.html
