无法使用引导程序在容器内居中 div [重复]答案

【问题标题】：Unable to center a div inside a container using bootstrap [duplicate]无法使用引导程序在容器内居中 div [重复]
【发布时间】：2019-04-06 18:21:41
【问题描述】：

我正在构建一个scorecard，我将在屏幕中间的圆圈内显示总体得分，而详细信息将在下一行中。

我正在使用 bootstrap 3，下面是我的代码

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <title>Utora Scorecard</title>
    <style>
        .circle {
          height: 150px;
          width: 150px;
          display: table-cell;
          text-align: center;
          vertical-align: middle;
          border-radius: 50%;
          font-weight: 10px;
          border-width: 3px;
          border-style: solid;
          border-color: red;
          font-size: 30px;
          margin-left: 200%;
    }
    </style>

  </head>

  <body>
    <div class="container">
        <div class="circle">
            57
        </div>

        <div class="row">
            <div class='col-lg-2 col-sm-3'>
             <!-- details of the score card will go in each of the columns -->
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

            <div class="col-lg-2 col-sm-3"> 
            </div>

        </div>

    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   </body>

</html>

这是它在浏览器中的样子

现在我希望这个圆圈位于屏幕中间但无法做到。

我尝试在div 上使用text-center、center-block、margin-left 等，但没有任何效果。如何使圆圈居中，即使浏览器大小发生变化，它仍保持在中心？

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

为此使用弹性框。在容器内创建一个 div，然后为其赋予 css 属性：display: flex; align-items: center; justify-content: center;。现在移动你想要在这个 div 中居中的所有元素。

【讨论】：

【解决方案2】：

向容器中添加一个新类，将其命名为“center-content”：

.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

或者如果你只想将圆水平居中添加到它

margin: auto;

【讨论】：