div需要居中[重复]答案

【问题标题】：Div needs to be centered [duplicate]div需要居中[重复]
【发布时间】：2018-10-08 23:40:22
【问题描述】：

看到我用红色箭头标记的空白处，我希望这些 div 居中。但它向左浮动。我将所有这些 div 放置到 middleBox div 并在 middleBox 我设置了 text-align: center 的样式，但没有任何效果。

帮帮我

我的 HTML

#middleBoxMargin {
    margin-top: 80px;
  }

#middleBox {
  text-align: center;
}

#groupInsurance {
    background-color: #EEEEEE;
    text-align: center;
  height: 145px;
}

#lifeInsurance {
  background-color: #EEEEEE;
    text-align: center;
  height: 145px;
}

#dentalInsurance {
  background-color: #EEEEEE;
    text-align: center;
  height: 145px;
}

#replacementInsurance {
  background-color: #EEEEEE;
    text-align: center;
  height: 145px;
}

<div class="container">
  <div class="row">
    <div class="col-sm-12" id="middleBoxMargin">
      <div id="middleBox">
       <div class="col-sm-2">
        <div id="groupInsurance"></div>
       </div>
       <div class="col-sm-2">
        <div id="lifeInsurance"></div>
       </div>
       <div class="col-sm-2">
        <div id="dentalInsurance"></div>
       </div>
       <div class="col-sm-2">
        <div id="replacementInsurance"></div>
       </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

弯曲，弯曲，弯曲！
@TakitIsy 对不起？
我添加了一个答案。我不喜欢在不必要的时候使用模块中的类和东西。
@Anuresh 这不是我第一次看到您编辑问题以简单地包含代码的 sn-p，您需要停止此操作，否则我会将您标记为版主...查看代码和他提供的图像，代码是否显示了这个输出？该代码没有按照 OP 提到的方式工作，因为它缺少包含或更多代码，因此请停止将代码自动转换为 sn-p
@TemaniAfif 现在看起来怎么样？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

添加

display: flex; 
justify-content: center;

#middleBoxMargin {
    margin-top: 80px;
}

#middleBox {
    display: flex;
    justify-content: center;
}

#groupInsurance {
    background-color: #EEEEEE;
    text-align: center;
    height: 145px;
}

#lifeInsurance {
    background-color: #EEEEEE;
    text-align: center;
    height: 145px;
}

#dentalInsurance {
    background-color: #EEEEEE;
    text-align: center;
    height: 145px;
}

#replacementInsurance {
    background-color: #EEEEEE;
    text-align: center;
    height: 145px;
}

<div class="container">
    <div class="row">
        <div class="col-sm-12" id="middleBoxMargin">
            <div id="middleBox">
                <div class="col-sm-2">
                    <div id="groupInsurance"></div>
                </div>
                <div class="col-sm-2">
                    <div id="lifeInsurance"></div>
                </div>
                <div class="col-sm-2">
                    <div id="dentalInsurance"></div>
                </div>
                <div class="col-sm-2">
                    <div id="replacementInsurance"></div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

如果您使用的是 boostrap 4，则将 justify-content-md-center 类添加到 div 和 row 类就可以完成这项工作。但似乎您正在使用引导程序 3，因此您可以使用 offset 类。尝试以这种方式更新您的代码。

<div class="container">
  <div class="row">
    <div class="col-sm-12" id="middleBoxMargin">
      <div class="row" id="middleBox">
        <div class="col-sm-2 col-sm-offset-2">
          <div id="groupInsurance"></div>
        </div>
        <div class="col-sm-2">
          <div id="lifeInsurance"></div>
        </div>
        <div class="col-sm-2">
          <div id="dentalInsurance"></div>
        </div>
        <div class="col-sm-2">
          <div id="replacementInsurance"></div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

你可以使用 flex

#middleBox {
    display: flex;
    justify-content:center
}

.col {
  padding: 0 15px;
}

.box {
    background-color: #EEEEEE;
    text-align: center;
    height: 100px;
    width: 100px;
}

<div class="container">
  
            <div id="middleBox">
                   <div class="col">
                    <div id="groupInsurance" class="box"></div>
                   </div>
                   <div class="col">
                    <div id="lifeInsurance" class="box"></div>
                   </div> 
                   <div class="col"> 
                    <div id="dentalInsurance" class="box"></div>
                   </div> 
                   <div class="col"> 
                    <div id="replacementInsurance" class="box"></div>
                   </div>
            </div>
            
 </div>

或者更好的是你可以使用网格

#middleBox {
  display: grid; 
  grid-template-columns: repeat(4, 100px);
  grid-gap: 15px;
  justify-content: center;
}

.box {
    background-color: #EEEEEE;
    text-align: center;
    height: 100px;
    width: 100%;
}

<div class="container">
  
            <div id="middleBox">
                    <div id="groupInsurance" class="box"></div>
                    <div id="lifeInsurance" class="box"></div>
                    <div id="dentalInsurance" class="box"></div> 
                    <div id="replacementInsurance" class="box"></div>
            </div>
            
 </div>

【讨论】：

【解决方案4】：

我会做那种事：

div {
  border: 1px solid black;
}

#middleBoxMargin {
  margin-top: 80px;
}

#middleBox {
  display: flex;
  justify-content: center;
}

#middleBox > div {
  background-color: #EEEEEE;
  text-align: center;
  height: 145px;
  width: 20%;
  margin: 5px 10px;
}

<div class="container">
  <div class="row">
    <div class="col-sm-12" id="middleBoxMargin">
      <div id="middleBox">
        <div class="col-sm-2">
          <div id="groupInsurance"></div>
        </div>
        <div class="col-sm-2">
          <div id="lifeInsurance"></div>
        </div>
        <div class="col-sm-2">
          <div id="dentalInsurance"></div>
        </div>
        <div class="col-sm-2">
          <div id="replacementInsurance"></div>
        </div>
      </div>
    </div>
  </div>
</div>

请注意，CSS 更短了，现在您在 html 中的一些类已经没用了。

【讨论】：