居中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;
 }

演示