CSS设置水平居中和垂直居中

1.行内元素设置水平居中
通过设置父元素

text-align:center

2.定宽块状元素设置水平居中
通过设置“左右margin”值为“auto”来实现居中的。

width:500px;/*定宽*/margin:0px auto;/* margin-left 与 margin-right 设置为 auto */

3.不定宽块状元素设置水平居中
(1)为需要设置的居中的元素外面加入一个 table 标签；这个table的CSS样式设置为“左右 margin”的值为auto

<tbody><tr><td>    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></td></tr></tbody>

table{    margin:0 auto;}

(2)改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果

<div class="container">    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></div>

.container{    text-align:center;}.container ul{    list-style:none;    display:inline;}.container li{    margin-right:8px;    display:inline;}

(3)通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%; 子元素设置 position:relative 和 left:-50% 来实现水平居中。

<div class="container">    <ul>        <li><a href="#">1</a></li>        <li><a href="#">2</a></li>        <li><a href="#">3</a></li>    </ul></div>

.container{    position:relative;    left:50%}.container ul{    list-style:none;    position:relative;    left:-50%;}.container li{    float:left;    display:inline;    margin-right:8px;}    

4.父元素高度确定的单行文本垂直居中
通过设置父元素的 height 和 line-height 高度一致来实现

<div class="container">    hi,imooc!</div>

.container{    height:100px;    line-height:100px;}

5.父元素高度确定的多行文本垂直居中

(1)使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle

<table><tbody><tr><td class="wrap">    <div>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>    </div></td></tr></tbody></table>

    td 标签默认情况下就默认设置了 vertical-align 为 middle

(2)设置块级元素的 display 为 table-cell，设置 vertical-align 属性

<div class="container">    <div>        <p>看我是否可以居中。</p>        <p>看我是否可以居中。</p>    </div></div>

.container{    display:table-cell;/*IE8以上及Chrome、Firefox*/    vertical-align:middle;/*IE8以上及Chrome、Firefox*/}

以上技巧和代码整理致 imooc

http://www.imooc.com/learn/9