浮动元素居中的实现方式

浮动元素居中的实现方式

在css3之前，对自适应内容宽度的浮动元素，实现居中，似乎还是有点难度的。 比如这样的一个场景， 数量不确定的页码，在页面底部水平居中。

假设html结构如下;

<div class="pager">
    <ul class="pager-nums">
        <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
    </ul>
</div>

<!-- 若不浮动 .page-nums, 则： -->
ul {text-align:center;}
ul li{display: inline-block; padding:2px 5px;}

若ul浮动，则可以用 position:relative; left:50%,让ul左边居中，然后再返回自身宽度的一半。

 /*ul浮动，宽度自适应内部li的总宽度,left:50% 定位到中间;*/
ul {float:left; position:relative; left: 50%;}
/*li相对定位，li都向前偏移ul总宽度的一半 从而实现居中*/ 
ul li {float:left; position:relative; left:-50%}

若使用css3, 则可以用position:relative; left:50%让ul左边居中， 然后用 transform: translateX(-50%) 实现返回自身宽度的一半。