元素水平居中的实现
在网页实现中，经常会遇到水平居中的需求。例如要求一个标题水平居中，这时只需要设置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; }
上面提到了三种方法都可以实现不固定宽度的块级元素的水平居中，且它们之间各有利弊，开发人员可以根据实际场景选择不同的方法去实现。
