html - CSS 如何让 div 的子对象出现在中心？

Question

我非常确定我没有正确地制作子 div。当我的按钮位于 div“button-holder”的左侧时，我的按钮从右侧出现 我希望我的 button-holder 内的按钮从左侧开始出现。按钮持有人也应位于框下方。我不希望它的边距低于下方。请帮助我。

.background{
                background-color:grey;
                height:100%;
            }
            .stopwatch-background{
                width:500px;
                height:300px;
                background-color:white;     
                position:relative;
                top:30%;
                left:30%;
                border-radius:40px;
                padding-top:45px;
                padding-left:50px;
                padding-right:40px;
            }
            .border{
                background-color:#B7A8A8;
                width:150px;
                height:200px;
                border-radius:10px;
                float:left;
            }
            .big-semicolon{
                float:left;
                font-size:300px;
                position:relative;
                top:-170px;
                margin-left:20px;
                margin-right:20px;
            }
            .boxes{
           
            }
            .button-holder{
                background-color:green;
                width:400px;
                height:40px;
                margin-top:207px;
                display:block;
            }
            .btn{
                margin-left:20px;
                margin-right:20px;
                float:left;
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <div class="background">
        <div class="stopwatch-background">
            <div class="boxes">
                <div class="border"></div>
                <div class="big-semicolon">:</div>
                <div class="border"></div>
            </div>
            <div class="button-holder">
                <button class="btn btn-primary">Start</button>
                <button class="btn btn-primary">Start</button>
                <button class="btn btn-primary">Start</button>
            </div>
        </div>

Answer 1

我修改了 button-holder 和 btn 类:

.button-holder{
  background-color:green;
  width:400px;
  height:40px;
  display:flex;
}
.btn{
  margin-left:20px;
  margin-right:20px;
}

这就是你所期望的？

我也重新安排了一些你的 CSS。

.background{
  background-color:grey;
  height:100%;
}
.stopwatch-background{
  width:500px;
  height:300px;
  background-color:white;     
  position:relative;
  left:30%;
  border-radius:40px;
  padding-top:45px;
  padding-left:50px;
  padding-right:40px;
}
.boxes{
  display: flex;
}
.border{
  background-color:#B7A8A8;
  width:150px;
  height:200px;
  border-radius:10px;
}
.big-semicolon{
  height: 200px;
  font-size:300px;
  line-height: 140px;
  margin-left:20px;
  margin-right:20px;
}
.button-holder{
  background-color:green;
  width:400px;
  height:40px;
  display:flex;
}
.btn{
  margin-left:20px;
  margin-right:20px;
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">   </script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <div class="background">
    <div class="stopwatch-background">
        <div class="boxes">
            <div class="border"></div>
            <div class="big-semicolon">:</div>
            <div class="border"></div>
        </div>
        <div class="button-holder">
            <button class="btn btn-primary">Start</button>
            <button class="btn btn-primary">Start</button>
            <button class="btn btn-primary">Start</button>
        </div>
    </div>
  </div>