水平居中和垂直居中

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