元素水平居中的实现

在网页实现中，经常会遇到水平居中的需求。例如要求一个标题水平居中，这时只需要设置css属性text-align：center即可。代码如下所示：

<div class="wrap">
        <h3>标题居中对齐</h3>
</div>

  .wrap{
     background: #808080;
     width: 200px;
     height: 100px;
     padding: 20px;
  }
            
.wrap h3{
     text-align: center;
     color: #12226a;
  }    

效果图如下：

如果是要求图片居中呢，同样可以使用text-align：center来实现，代码如下所示：

    <div class="wrap">
            <img alt="cat" src="../images/cat.png"/>
    </div>

    .wrap{
         background: #808080;
         width: 400px;
         height: 300px;
         padding: 20px;
         text-align: center;
     }

效果图如下：

文本和图片都是行内元素，它们都可以通过简单的设置包含元素的text-align属性来实现水平居中对齐。但对于块级元素，text-align属性就不再起作用了。如果块级元素的宽度确定的话，我们可以使用margin-left:auto和margin-right:auto来实现水平居中，代码如下所示：

      <div class="wrap">
            <div class="fixed-width-block"></div>
       </div>

            .wrap{
                background: #808080;
                width: 400px;
                height: 200px;
                padding: 20px;
            }
            
            .fixed-width-block{
                background: #0d4d72;
                width: 100px;
                height: 100px;
                margin-left: auto;
                margin-right: auto;
            }

效果图如下所示：

事实上，前端开发人员经常使用margin:0 auto的方法使页面相对于浏览器居中对齐。

上面我们讲到了不同类型的元素的居中对齐方法，这些方法都比较简单，只需要简单的设置相应的css属性就可以实现。现在，如果我们碰到了这样的一个需求，有一个分页模块，我们页数的列表是水平居中的，因为页数是不固定的，所以块级元素ul的宽度也是不确定的，无法使用margin-left:auto和margin-right:auto来实现。参考行内元素的对齐方法，我们可以将块元素设置成行内元素，然后再通过设置text-align属性将它居中对齐。代码如下所示：

       <div class="wrap">
            <ul class="auto-width-block">
                <li>1</li>
            </ul>
           <ul class="auto-width-block">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
           <ul class="auto-width-block">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
       </div>

            .wrap{
                background: #808080;
                width: 400px;
                height: 200px;
                padding: 20px;
            }
            
            ul{
                padding: 0;
            }
            
            .auto-width-block{
                text-align: center;
            }
            .auto-width-block li{
                display: inline;
                color: YellowGreen;
            }

效果图如下所示：

这种方法可以实现不固定宽度的块元素的水平居中，但是由于将块元素改成了行内元素，而行内元素比起块元素缺少一些功能，在某些应用场景下，该方法并不适用。除了这种方法之外，还有一种方法就是通过定位的方式去实现，将父元素和子元素都设置成相对定位，然后父元素的left设置成50%，float设置成left，子元素的left设置成-50%，代码如下：

            .wrap{
                background: #808080;
                width: 400px;
                height: 200px;
                padding: 20px;
            }
            
            ul{
                padding: 0;
            }
            
            .auto-width-block{
                position: relative;
                left: 50%;
                float: left;
                clear: both;
            }
            
            .auto-width-block li{
                display: inline;
                color: YellowGreen;
                padding: 0 5px;
                position: relative;
                left: -50%;
            }

该方法保留了块级元素的属性，但是引入了相对定位，会带来一定的副作用。

除了以上的方法之外，还有一种方法就是继续利用margin-left和margin-right，那就是因为table元素，table元素的特别之处在于它本身不是块级元素，如果不给它设置宽度的话，它的宽度将由内部元素“撑起”。所以即使不设置它的宽度，我们仍然可以使用margin的方法来使其居中，不过这样做的缺点就是引入了无语义的标签table，代码如下所示：

       <div class="wrap">
           <table><tr><td>
                <ul class="auto-width-block">
                    <li>1</li>
                </ul>
            </td></tr></table>
           <table><tr><td>
               <ul class="auto-width-block">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </td></tr></table>
            <table><tr><td>
                <ul class="auto-width-block">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </td></tr></table>
       </div>

            .wrap{
                background: #808080;
                width: 400px;
                height: 200px;
                padding: 20px;
            }
            
            ul{
                padding: 0;
            }
            
            .wrap table{
                margin-left: auto;
                margin-right:auto;
            }
            
            .auto-width-block li{
                display: inline;
                color: YellowGreen;
            }

上面提到了三种方法都可以实现不固定宽度的块级元素的水平居中，且它们之间各有利弊，开发人员可以根据实际场景选择不同的方法去实现。