Css3元素浮动时居中

（1）使用margin：auto+position：absolute

Html:代码如下

<span style="font-family:KaiTi_GB2312;font-size:18px;">    <div class="container">
<div class="content">
使用margin:auto居中
</div>
</div></span>

Css：代码如下

<pre name="code" class="html"><span style="font-size:18px;">       <span style="font-family:KaiTi_GB2312;"> .container {
position: relative;
width: 400px;
height: 150px;
background: red;
}
.content{
width: 150px;
height: 50px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: green;
}</span></span><span style="font-size: 18px;">
</span>

（2）使用 top与margin-top;left与margin-left相互矫正

<pre name="code" class="html"><span style="font-family:KaiTi_GB2312;font-size:18px;"></span><pre name="code" class="html"><pre name="code" class="html">.container {
position: relative;
width: 400px;
height: 150px;
background: red;
}
.content {
width: 150px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -75px;
margin-top: -25px;
background: green;
}

<span style="font-family:KaiTi_GB2312;font-size:18px;"></span><pre name="code" class="html">.container {
position: relative;
width: 400px;
height: 150px;
background: red;
}

width: 150px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
}

扩展：如果想实现拖出文档流居中，只需把父级变为position：reactive同理如果想实现永久居中则变为position：fixed