无法将 Div 居中？答案

【问题标题】：Trouble centering Divs?无法将 Div 居中？
【发布时间】：2016-02-17 12:46:13
【问题描述】：

如果这是一个基本问题，我深表歉意，但我无法将四个 div 居中。所有四个绿色 div 左侧都有一个浮点数，然后是一个包装 div（蓝色）。我想将四个 div 居中，但让它们像这样对齐（在更大的分辨率下，它们不会沿中间显示）。因此，当减小屏幕尺寸时，divs 将在彼此下方浮动。

http://jsfiddle.net/qvu712tj/

#blog-wrapper {
  background-color: blue;
  width: 100%;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
  align: center;
}
.blog-section {
  background-color: green;
  height: 200px;
  width: 45%;
  margin: 10px;
  float: left;
  padding: 5px;
}

<div id="blog-wrapper">
  <div class="blog-section"></div>
  <div class="blog-section"></div>
  <div class="blog-section"></div>
  <div class="blog-section"></div>
</div>

我希望这是有道理的，请有人帮忙吗？

【问题讨论】：

这是因为浮动。您需要以 % 为单位设置它们的宽度，或者当屏幕太小时使用媒体查询删除浮动。
感谢您的回复，但问题是 div 居中
link
你也可以使用 display: inline-block 和 text-align: center : codepen.io/mbrillaud/pen/RWvVOo?editors=110
@RyanHolmes 你删除了your question 但在这里你有一个方法jsfiddle.net/adkue36x

标签： html css

【解决方案1】：

试试这个：

.blog-section {
  background-color: green;
  height: 200px;
  width: 45%;
  margin: 10px 2.5%;
  float: left;
/* padding: 5px; */ 
}

【讨论】：

非常感谢非常感谢，这正是我所追求的！

【解决方案2】：

使用百分比而不是像素作为边距和内边距

.blog-section{
    background-color: green;
    height: 200px;
    width: 45%;
    margin: 1%;
    float: left;
    padding: 1.5%;

}

【讨论】：

【解决方案3】：

试试这个

.blog-section{
  background-color: green;
  height: 200px;
  width: 48%;
  margin: 12px 1%;
  float: left;
}

【讨论】：