CSS 浮动元素的水平居中

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

1、HTML部分：

<div class="box">

<p>我是浮动的</p>

<p>我也是居中的</p>

</div>

2、css部分：

.box{

float:left;

position:relative;

left:50%;

}

p{

float:left;

position:relative;

right:50%;

}

这样看来就很简单了吧，父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。如此简单如此神奇。

实际项目中，我们会让内容自适应于元素（连同相应底边框），当然就要应用到浮动，居中的话，就用这种方法甚好！（如果不应用浮动直接text-align:center，内容虽然居中，但是整行底边显示，达不到预期效果。）