首页 > 代码库 > 水平居中和垂直居中
水平居中和垂直居中
水平居中(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;}
水平居中和垂直居中