center element

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"></script>
<style>
.cssAmount{font-size:2em;}
.col-center-block {
    float: none;
    display: table;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

.img-fluid{max-width:100%;height:auto}

.rounded{border-radius:.25rem!important}.rounded-top{border-top-left-radius:.25rem!important;border-top-right-radius:.25rem!important}
.rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important}
.rounded-bottom{border-bottom-right-radius:.25rem!important;border-bottom-left-radius:.25rem!important}.
rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important}
.rounded-circle{border-radius:50%!important}.rounded-0{border-radius:0!important}
.divCenter{text-align:center;}
</style>

<div class="container">

   <div class="row">
    <div class="col-sm-8 col-xs-10 col-md-8 col-lg-8 col-xl-8 col-center-block">
       <img class="img-fluid rounded" src="https://lh5.googleusercontent.com/-_OBigdWZMP8/AAAAAAAAAAI/AAAAAAAAABg/PVuCKWcShgk/s512-c/photo.jpg" alt="xs sm-576 md-768lg-992 xl-1200">

    </div>
  </div>
  <div class="row">
<div class="divCenter">
<Label class="cssAmount">$20</Label>
</div>
    <Label class="cssAmount col-center-block">$60</Label>
  </div>
 <div id="divShowforClient" class="col-sm-8 col-xs-10 col-md-8 col-lg-8 col-xl-8 col-center-block" style="margin-top:10px;">
  <div class="form-group row">
    <label class="col-sm-6 col-xs-4"><label id="successAlert">xxxxxxxxxxx:</label></label>
    <div class="col-sm-6 col-xs-8">
     <label id="labAmount">1.00</label> <label id="labCurrency">xxx</label>
    </div>
  </div>
<div class="form-group row">
    <label class="col-sm-6 col-xs-4">
        <label id="successAlert">xxx xxx <label id="labCurrency">xxx</label>:</label>
    </label>
    <div class="col-sm-6 col-xs-8">
     <label id="labAmount">1.00</label>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-6 col-xs-4">
        <label>xx:</label>
    </label>
    <div class="col-sm-6 col-xs-8">
     <label id="labTo">XXXXXXxxxxxxxxxxxxxxxxxxxxxxxXXX</label>
    </div>

 <div class="form-group" id="two-step1" style="float: none;clear: both;">
      <label for="CB-2FA-TOKEN">Please enter xxxxxxxxxxxxxxxx</label>
      <label id="labelVerificationCode"></label>
      <input type="text" class="form-control" id="CB-2FA-TOKEN" name="CB-2FA-TOKEN">
 </div>

</div><!--divShowforClient-->
<style>
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}
.button {
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;  
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
  background-color: #fff /*#3e8e41*/;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>

<div class="footer1">
  <div class="col-sm-12 col-md-12 text-center">
   <button type="button" class="button"  style="width:46%;" onclick="startTrasaction()" id="btnConfirm">Confirm</button>
  </div>
</div>

</div><!--container-->
<div class="sec-content">
<img class="img-fluid rounded" id="imgGiftCard" src="//lh5.googleusercontent.com/-_OBigdWZMP8/AAAAAAAAAAI/AAAAAAAAABg/PVuCKWcShgk/s512-c/photo.jpg" alt="">
</div>
<script language="javascript" type="text/javascript">
window.onload = function () {
  $.each($(".sec-content img"), function (i, v) {
    if (screen.width > 740)
    {
      v.width = 40;
      v.removeAttribute('height');
    }
  });
}

other way:
  margin: auto;position: absolute;  top: 0; bottom: 0; left: 0; right: 0;