How to center align buttons in a modal content?

Question

I have 6 buttons in my modal, I'm trying to make them center + vertical align in the page

<div class="modal fade" id="feedModal">
    <div class="model-content row">
        <div class="col-xs-12 col-sm-offset-2 col-sm-8 text-center">

            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >1 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >2 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >3 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >4 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >5 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >6 oz </a>
            
            
        </div>
    </div>
</div>

CSS

.btn-amount {
    background: #ffffff4f !important; 
    border: white 1px solid !important; 
    height: 50px; 
    vertical-align: middle !important;
    margin-top: 30px;
    width: 60%;
    display: block;
}

.btn-amount:hover {
    box-shadow: 0 5px 15px white;
}

Result

Answer 1

<div class="modal fade" id="feedModal">
    <div class="model-content row">
        <div class="col-xs-12 col-sm-offset-2 col-sm-8 text-center">

            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >1 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >2 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >3 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >4 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >5 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >6 oz </a>
            
            
        </div>
    </div>
</div>

Sometimes a problem need a simple solution,try:

  .btn-amount {
  position: relative;
  float: left;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin-top: 70px;
  margin-bottom: 70px;
  .btn-amount:first-of-type {
    margin-top: 0;
  }
  .btn-amount:last-of-type {
    margin-bottom: 0;
  }

this solution will give all of your div margin so they won't stick each other. & you can change the margin-top and margin-bottom style.

Answer 2

There are lots of ways to achive this, but as per my opinion use of flex is the one you should go with,

1. Give display:flex; to the parent in which your child element is to them you want to do the center.

2. justify-content is the property which will adjust items on X axes and in case of flex-direction: column; it will adjust the items on Y axes.

3. align-items is the property which will adjust items on Y axes and in case of flex-direction: column; it will adjust the items on X axes.

4. so if you want your child elements to make them center on both the axes, then use align-items:center and justify-content: center; on the parent, it will make your child elements center on both the axes as shown in your image,

.btn-amount {
    background: #fff !important; 
    border: #fff 1px solid !important; 
    height: 50px; 
    vertical-align: middle !important;
    margin-top: 30px;
    width: 60%;
    display: block;
}

.btn-amount:hover {
    box-shadow: 0 5px 15px white;
}
.model-content {height: 300vh;//this is just for demo purpose}
.model-content > div {
width: 60%; height: 100%; margin: 0 auto;width: 60%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
body {background-color: #000;}

<div class="modal fade" id="feedModal">
    <div class="model-content row">
        <div class="col-xs-12 col-sm-offset-2 col-sm-8 text-center">

            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >1 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >2 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >3 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >4 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >5 oz </a>
            <a data-type="feed" onclick="playSound('feed')" class="btn btn-amount col-xs-12 col-sm-2" >6 oz </a>
            
            
        </div>
    </div>
</div>