水平居中和垂直居中

1.水平居中

(1) 文本、图片等行内元素的水平居中

　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。

(2) 确定宽度的块级元素的水平居中

　　通过设置margin-left:auto;和margin-right:auto;来实现的。

(3) 不确定宽度的块级元素的水平居中

　　方法一:

　　使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中!

　　将需要居中的部分包含在table标签内，对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中，间接使需要居中的部分水平居中。

　　缺点：增加了无语意标签，加深了标签的嵌套层数。

<style type="text/css">
ul{list-style:none; margin:0; padding:0;}
.wrap{ width:500px; height:100px;}
table{margin-left:auto;margin-right:auto;}
.test li{float:left; display:inline; margin-right:5px;}
</style>

<div class="wrap">
  <table>
      <tbody>
          <tr>
            <td>
              <ul class="test">
                <li>1</li>
                <li>2</li>
                <li>3</li>
              </ul>
            </td>
          </tr>
      </tbody>
  </table>
</div>

　　方法二：

　　改变块级元素display为inline类型，然后使用text-align:center来实现居中。

　　较方法一，好处是不用增加无语义标签，简化了标签的嵌套深度。坏处，将块级元素的display类型改为inline，缺少了一些块级元素的功能，比如高宽。

<style>
.wrap{ width:500px; heighe:100px;}
.test{text-align:center; padding:5px;}
.test li{display:inline;}
</style>

<div class="wrap">
  <ul class="test">
    <li>1</li>
  </ul>
  <ul class="test">
    <li>1</li>
    <li>2</li>
  </ul>
  <ul class="test">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

　　方法三:

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

　　可以保留块级元素仍以display:block的形式显示，而且不添加无语义标签，不增加嵌套深度，但缺点是设置了position:relative，带来一定的副作用。

<style type="text/css">
ul{ list-style:none; margin:0; padding:0;}
.wrap{ background:#000; width:500px; height:100px;}
.test{ clear:both; padding-top:5px; float:left; position:relative; left:50%;}
.test li{ float:left; display:inline; margin-right:5px; position:relative; left:-50%;}
.test a{ float:left; width:20px; height:20px; text-align:center; line-height:20px; background:#09f; color:#fff; text-decoration:none;}
</style>

<div class="wrap">
    <ul class="test">
        <li><a href="#">1</a></li>
    </ul>
<ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
<ul class="test">
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>

当父元素和子元素都没有定义宽度的情况下实现水平居中： 

display:inline-block 
可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 
HTML代码: 

1 <div class="navbar"> 
2 <ul> 
3 <li><a href="/">Home</a></li> 
4 … 
5 </ul> 
6 </div> 

CSS代码: 

 1 .navbar { 
 2 text-align:center; 
 3 } 
 4 .navbar ul { 
 5 display:inline-block; 
 6 } 
 7 .navbar li { 
 8 float:left; 
 9 } 
10 .navbar li + li { 
11 margin-left:20px; 
12 } 

IE系列IE8+支持，要IE7 IE6 支持需要加入以下代码使display:inline像display:inline-block一样 

1 .navbar ul { 
2 *display:inline; 
3 *zoom:1; 
4 } 

position:relative 
使用position:relative与float相结合的技巧及其浮动和定位参照物的关系，这个技巧需要两个父元素，一个用来定位而另外一个用来避免出现滚动条。 
HTML代码: 

1 <div class="navbar"> 
2 <div> 
3 <ul> 
4 <li><a href="/">Home</a></li> 
5 … 
6 </ul> 
7 </div> 
8 </div> 

CSS代码: 

 1 .navbar { 
 2 overflow:hidden; 
 3 } 
 4 .navbar > div { 
 5 position:relative; 
 6 left:50%; 
 7 float:left; 
 8 } 
 9 .navbar ul { 
10 position:relative; 
11 left:-50%; 
12 float:left; 
13 } 
14 .navbar li { 
15 float:left; 
16 } 
17 .navbar li + li { 
18 margin-left:20px; 
19 } 

IE7下需要加入下列代码支持： 

1 .navbar { 
2 position:relative; 
3 } 

display:table 
如果向使用极少的标签实现，这个方法是个不错的选择。 
HTML代码: 

1 <ul class="navbar"> 
2 <li><a href="/">Home</a></li> 
3 … 
4 </ul>

CSS代码: 

 1 .navbar { 
 2 display:table; 
 3 margin:0 auto; 
 4 } 
 5 .navbar li { 
 6 display:table-cell; 
 7 } 
 8 .navbar li + li { 
 9 padding-left:20px; 
10 } 

不支持IE7及一下浏览器，其他的主流浏览器都支持。 

display:inline-flex 
这个方法需要使用 flex-layout 的知识。 
HTML代码: 

 

1 <div class="navbar"> 
2 <ul> 
3 <li><a href="/">Home</a></li> 
4 … 
5 </ul> 
6 </div> 

CSS代码: 

 1 .navbar { 
 2 text-align:center; 
 3 } 
 4 .navbar > ul { 
 5 display:-webkit-inline-box; 
 6 display:-moz-inline-box; 
 7 display:-ms-inline-flexbox; 
 8 display:-webkit-inline-flex; 
 9 display:inline-flex; 
10 } 
11 .navbar li + li { 
12 margin-left:20px; 
13 } 

使用CSS fit-content 值 
下面看看如何用fit-content创建一个包含子元素浮动的未知宽度的导航。 
HTML代码: 

 

1 <div class="navbar center"> 
2 <ul> 
3 <li><a href="/">Home</a></li> 
4 <li><a href="/">About us</a></li> 
5 <li><a href="/">Our products</a></li> 
6 <li><a href="/">Customer support</a></li> 
7 <li><a href="/">Contact</a></li> 
8 </ul> 
9 </div> 

CSS代码: 

代码如下:

1 .center ul{ 
2  -moz-fit-content; 
3  -webkit-fit-content; 
4  fit-content; 
5 margin: auto; 
6 } 

浏览器支持度较低 只Chrome和Firefox这样的-webkit- -moz-内核浏览器。当然以后慢慢会发展起来的。 
这个方式是推动浏览器发展的一个新的东西，目前供应于所以可以写前缀的浏览器，并没有工作在IE9和IE9以下。 
根据你的需求来选择合适的方法吧，display:inline-block兼容性较好，flex-box将会用于未来。

2.垂直居中

　　(1) 父元素高度不确定的文本、图片、块级元素的垂直居中

　　通过给父容器设置相同上下边距实现的，即设置padding-top和padding-bottom。

　　(2)父元素高度确定的单行文本的垂直居中

　　通过给父元素设置line-height来实现，line-height值和父元素高度值相同。

　　(3)父元素高度确定的多行文本、图片、块级元素的垂直居中

　　CSS中有一个用于垂直居中的属性vertical-align，但只有当父元素为td或者th时，这个属性才生效，对于其他块级元素，如div,p等，默认情况下是不支持vertical-align属性的。在firefox和ie8下，可以设置块级元素的display:table-cell来激活vertical-align属性，但ie6和ie7并不支持display:table-cell。

　　方法一：

　　直接使用table，因为td标签默认下就隐式设置了vertical-align:middle。

　　方法二：

　　对支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle来实现居中，对不支持display:table-cell的ie6和ie7，使用特定格式的hack。

<style type="text/css">
.mb10{margin-bottom:10px;}
.wrap{background:#000;width:500px;color:#fff;margin-bottom:10px;height:100px;display:table-cell;vertical-align:middle;*position:relative;}
.test{width:200px;height:50px;background:#f00;}
.verticalWrap{*position:absolute;*top:50%;}
.vertical{*position:relative;*top:-50%;}
</style>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <div class="vertical">
                hello world<br />
                hello world<br />
                hello world
            </div>
        </div>
    </div>
</div>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <img src="" class="vertical" />
        </div>
    </div>
</div>

<div class="mb10">
    <div class="wrap">
        <div class="verticalWrap">
            <div class="test vertical"></div>
        </div>
    </div>
</div>