CSS divの子オブジェクトを中央に表示する方法は？

Question

私は、子divを正しく作成する作業をしていないと確信しています。私のボタンは、divの左側にあるときに右から表示されます。 "button-holder"ボタンホルダーのstart内のボタンを左から表示したい。また、ボタンホルダーはボックスの下になければなりません。私はそれに余裕を持たせたくありません。私を助けてください。

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