css的居中布局问题

css经常用来处理居中问题，不同的情况使用不同的方法；

一 :水平居中

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

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

<style>
  .wrapper{width:500px; height:100px; text-align:center}
</style>
<div class="wrapper">
    hello world!
</div>
<div class="wrapper">
    <img src="test.png">
</div>

• (2)确定宽度的块级元素
  确定宽度的块级元素水平居中是通过设置margin-left:auto和margin-right:auto来实现。

<style>
  .wrapper{width:500px; height:100px;background:#ccc;}
  .inner{width:200px;height:50px;margin-left:auto;margin-right:auto;background:#f00;}
</style>
<div class="wrapper">
    <div class="inner">hello world!</div>
</div>

• (3)不确定宽度的块级元素的水平居中，有三种方式可以实现，以分页模块为例，因为分页的数量不确定，所以不能通过设置宽度来限制它的弹性。

  • 方法一

<style>
    ul {list-style:none;margin:0;padding:0;}
    table {margin-left:auto;margin-right:auto;}
    .test li{float:left;display:inline;}
    .test a{float:left;width:20px;height:20px;text-algin:center;line-height:20px;}
    .test a:hover{background:#fff;color:#313ac5;}
</style>

<div class="wrapper">
    <table>
        <tbody><tr><td>
            <ul class="test">
                <li><a href="#">1</a></li>
            </ul>
        </td></tr></tbody>
    </table>
    <table>
        <tbody><tr><td>
            <ul class="test">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </td></tr></tbody>
    </table>
    <table>
        <tbody><tr><td>
            <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>
        </td></tr></tbody>
    </table>
</div>

该方法演示了分页有一个页码，三个页码，五个页码。宽度值不能确定。
这里使用了一个table标签来帮助实现不确定宽度的块级元素的水平居中，table本身并不是块级元素，如果不给它设定宽度，它的宽度有内部元素的宽度撑起，即使不设定它的宽度，仅设定margin-left:auto和margin-right:auto就可以实现水平居中，将ul包含在table标签中，对table设置margin-left:auto和margin-right:auto，就间接的是ul实现水平居中。

• 方法二

<style>
    ul{list-style:none;margin:0;padding:0;}
    .wrapper{background:#000;width:500px;height:100px;}
    .test{text-align:center;padding:5px;}
    .test li{display:inline}
    .test a{padding:2px 6px; background:#333;color:#00f;border:2px solid #f00;text-decoration:none; }
    .test a:hover{background:#fff;color:#234567;}
</style>
<div class="wrapper">
    <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>
   

该方法改变了块级元素li的显示方法，display为inline，然后使用text-align:center来实现居中。此方法优点是不用增加过多的语义标签。缺点是块级元素设置成行内元素后，缺少了一些特性，不能设置宽度。

• 方法三

<style>
    ul{list-style:none;margin:0;padding:0;}
    .wrapper{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-left:5px;positive:relative;left:-50%;}
    .test a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#333;color:#00f;border:2px solid #f00;text-decoration:none; }
    .test a:hover{background:#fff;color:#234567;}
</style>
<div class="wrapper">
    <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>    

该方法通过给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来设置水平居中。这个方法可以保留块级元素有的display:block属性，且不会添加语义标签。缺点是设置了position:relative，增加了一些副作用。

垂直居中

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

<style>
    .wrapper{background:#000;width:500px;color:#fff;padding-bottom:10px;
    padding-top:10px;}
    .test{width:200px;height:50px;background:#f00;}
</style>
<div class="wrapper">hello world</div>
<div class="wrapper"><img src="test.jpg" /></div>
<div class="wrapper"><div class="test"></div></div>

父元素高度不确定的文本、图片、块级元素的垂直居中通过给父容器设置相同的上下内边距来实现。

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

<style>
    .wrapper{background:#000;width:500px;height:100px;line-height:100px;color:#fff;}
</style>
<div class="wrapper">hello world</div>

父元素高度确定的单行文本的垂直居中，通过给父元素设置line-height来实现的，line-height的值和父元素的高度值相同

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

• 方法一

利用css的一个垂直居中属性vertical-align，但是只有当父元素为td或th时，这个vertical-align才会生效，对于其他的块级元素（div、p）默认情况下是不支持该属性。在Firefox和IE8下，可以设置块级元素的display:table-cell属性，激活vertical-align。在IE6和IE7下不支持table-cell属性，设置table-cell方法无法解决浏览器兼容问题。总之，直接使用表格减少些操作。缺点是增加了嵌套深度和语义标签。

<style>
    .wrapper{background:#000;width:500px;color:#fff;height:100px;}
    .test{width:200px;height:50px;background:red;}
</style>
<table>
    <tbody><tr><td class="wrapper">
        hello<br>
        hello<br>
        hello<br>
        hello
    </td></tr></tbody>
</table>
<table>
    <tbody><tr><td class="wrapper">
        <img src="img.jpg">
    </td></tr></tbody>
</table>
<table>
    <tbody><tr><td class="wrapper">
        <div class="test"></div>
    </td></tr></tbody>
</table>

• 方法二

对于支持display:table-cell的IE8和Firefox用display:table-cell和vertical-align：middle。对于不支持的IE6和IE7使用特定的hack。利用hack技术区别对待Firefox、IE8、IE7和IE6，在不支持display:table-cell的IE6、IE7下，通过给父子两层元素分别设置top:50%和top:-50%来实现居中。

<style>
    .mb10{margin-bottom:10px;}
    .wrapper{background:#f00;width:500px;color:#fff;margin-bottom:10px;height:10px;
    display:table-cell;vertical-align:middle;*position:relative;}
    .test{width:200px;height:50px;background:#f00;}
    .verticalWrapper{*position:absolute;*top:50%;}
    .vertical{*position:relative;*top:-50%;}
</style>
<div class="mb10">
    <div class="wrapper">
        <div class="verticalWrapper">
            <div class="vertical">
            hello world!<br>
            hello world!<br>
            hello world!
            </div>
        </div>
    </div>
</div>
<div class="mb10">
    <div class="wrapper">
        <div class="verticalWrapper">
            <img src="img.jpg" class="vertical">
        </div>
    </div>
</div><div class="mb10">
    <div class="wrapper">
        <div class="verticalWrapper">
            <div class="test vertical"></div>
        </div>
    </div>
</div>

内容选自《编写高质量代码-web前端开发修炼之道》