CSS如何使div的子对象出现在中心？

Question

我非常确定我没有做正确制作儿童div的工作。当按钮位于div“按钮架”的左侧时，我的按钮从右侧出现。我希望按钮架内部的按钮从左侧出现。按钮夹也应位于盒子下面。我不希望它有下边距。请帮帮我。

yourSpinner.setOnItemSelectedListener(new OnItemSelectedListener() {

                @Override
                public void onItemSelected(Spinner parent, View view,
                        int position, long id) {



                }
            });

.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;
            }

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>