浮动元素水平居中
1 宽度不固定的浮动元素
<div class="outerbox"> <div class="innerbox">我是浮动的</div> </div>
.outerbox{ float:left; position:relative; left:50%; } .innerbox{ float:left; position:relative; right:50%; }
2 宽度固定的浮动元素
<div class="outerbox"> <div>我是浮动的</div> </div>
.outerbox{ background-color:pink; /*方便看效果 */ width:500px ; height:300px; margin: -150px 0 0 -250px; /*使用marin向左移动250px,保证元素居中*/ position:relative; /*相对定位*/ left:50%; top:50%; }
本博客作为一个入门者的自学记录,欢迎各位同行者不吝赐教。