不定宽的浮动元素如何设置水平居中

对于定宽的非浮动元素我们可以在 CSS 中用 margin:0 auto 进行水平居中；对于不定宽的浮动元素，我们也有一个常用的技巧解决它的水平居中问题。

一、html 标记语言框架

<div class="wrap_clearfix">
......
	<div class="inwrap">
		<ul class="page">
			<li>1</li>
			<li>...</li>
		</ul>
	</div>
</div>

1.1、补充说明

1. wrap_clearfix 元素包括列表页主要内容。
2. inwrap 元素包括分页信息(对内容元素的封装)；浮动元素，宽度不确定。
3. page 元素包含分页信息；浮动元素，宽度不确定。

二、CSS 样式设置

.wrap_clearfix{position:relative; overflow:hidden;zoom:1;}
.wrap_clearfix:after { content:""; height:0; visibility:hidden; display:block; clear:both; }
.inwrap{ float:left; position:relative; left:50%;}
.page { float:left; position:relative; right:50%; }

2.1、补充说明

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。