Html 将CSS div居中，中间有问题

嘿，伙计们，我上面有一个密码笔链接，你们可以看到。我在中间盒子的中心有很多问题。我该怎么做呢。当我将其居中时，当我缩小浏览器时，中间的框似乎偏向一侧

这是我的密码

#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>

左

对

麦克洛姆

由于“float:left”规则，中间块粘在一边。要居中，它不需要浮动。您只需添加“自动”水平边距，无需任何浮动，即可正常工作

以下是修改后的示例：

（父容器的顶部填充有一个技巧，可以避免顶部边距的问题，但您可以随意解决）

希望它能帮助您，#McColumn现在居中了

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