居中CSS div，中间有问题

Question

http://codepen.io/willc86/pen/hpFLe

大家好，我在顶部有一个密码笔链接，以便大家看到。 我在将中间框居中时遇到了很多问题。 我怎么做。 当我居中时，当我缩小浏览器时，中间框似乎偏向一侧

这是我的代码

#box{
  border: 3px solid red;

}

#space{
  text-align: center;

}
#leftcolumn { 
  width: 300px; border: 1px solid red; float: left; margin: 40px;
  margin-right: 20px;

}
#rightcolumn { 
  width: 300px; border: 1px solid red; float: right; 
  margin: 40px; margin-left: 20px;

}
#mcolumn {
   width: 300px; border: 1px solid red; float: left; margin: 40px;

}
.clear {
   clear: both;
}

和我的HTML

<div id="box">
      <div id="space">       
            <div id="leftcolumn"><p>LEFT</p></div>
            <div id="rightcolumn"><p>RIGHT</p></div>
            <div id="mcolumn"><p>mcolomn</p></div>
            <div class="clear"></div>          
      </div>
  </div>

Answer 1

由于“ float：left”（浮动：左）规则，中间块会粘在一侧。 要居中，它不需要浮动。 您可以添加“自动”水平边距而没有任何浮动，它将很好地工作。

这是修改后的示例： http : //codepen.io/anon/pen/pitod

（使用父容器顶部填充有一个技巧，可以避免顶部边距出现问题，但是您可以根据自己的喜好解决）

Answer 2

希望对您有帮助，＃mcolumn现在居中

 #mcolumn {
 width: 300px;
 border: 1px solid red;
 margin: 40px auto;
 display: inline-block;
 }

演示