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、IE八、IE7和IE6，在不支持display:table-cell的IE六、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前端开发修炼之道》