水平居中，position：relative；left：-50%；

例如下面代码中，inner想要在outer内水平居中，给inner外部添加了一个wrap包裹：

<div class="outer">
   <div class="wrap">
     <div class="inner"></div>
   </div>
</div>

CSS代码为：
.wrap{ float:left; position:relative; left:50%; } .outer{ width:300px; height:400px; background:#FFCC99; } .inner{ width:100px; height:100px; background:#C33; position:relative; /*????*/ left:-50%; }…  显示全部

添加评论 

分享

按投票排序 按时间排序

3 个回答

知乎用户 ，学习图形学中的网站开发

知乎用户  赞同

如图

.wrap 左浮动50%，相当于它的 左边位于 .out 的 中线

.inner 左浮动-50%，就相当于以.out的中线为基准左移一般，于是就居中了

.inner 里的position: relative，就是为了 让 .inner 以 .wrap 为基准左移而不是 .out 。

这算是一种取巧的方法吧，现在标准中有margin: auto的方法，也有text-align: center的方法，更有display: box; box-orient: horizontal; 的方法，这种取巧的方式已经越来越少用了。