首页 > 代码库 > 水平居中和垂直居中

水平居中和垂直居中

 
 

水平居中(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;}

 

 

水平居中和垂直居中