aligning the two buttons on the center of screen using padding

Issue

I have two buttons in my code and wondering how can I move them to the center of the screen using CSS.I tried playing around with the padding: 10px 24px 24px 30px; but it doesn't seem to be putting the two buttons at the center of the screen. Also, I want them to be responsive.

Here is my snippet:

/* .btn-group button {   */
    .btn-group-vertical button { 
      background-color: #0b0e0d; /* Black background */
      border: 1px solid rgb(239, 240, 239); /*  border */
      color: white; /* White text */
      padding: 10px 24px 24px 30px; /* Some padding top right bottom left */
      cursor: pointer; /* Pointer/hand icon */
      width: 50%; /* Set a width if needed */
      display: block; /* Make the buttons appear below each other */
      font-weight: bold;
      font-size: 14px;
      text-transform: uppercase;
      margin-bottom: 50px;
    }
    
    .btn-group button:not(:last-child) {   
      border-bottom: none; /* Prevent double borders */
    }
    
    /* Add a background color on hover */
    /* .btn-group button:hover { */
    .btn-group-vertical button:hover {    
      background-color: #ffffff; 
      color: #0b6d11;
    }

<div  >
        <div >
            <div class="btn-group-vertical"> 
                    <button type="button" id = "stbButton " '">First Button</button>
                    <button type="button" id = "cdbButton"  >Second Button</button>
             </div> 
         </div>
      </div>
  

Solution

Use display:flex in your container, then align and justify your elements to the centre. Setting flex-container to column will stack your elements on top of each other.

Setting the height to 100vh will make the container fill the height of the viewport, and your content will be vertically centred within it:

.btn-group-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  height:100vh;
}


/* .btn-group button {   */

.btn-group-vertical button {
  background-color: #0b0e0d;
  /* Black background */
  border: 1px solid rgb(239, 240, 239);
  /*  border */
  color: white;
  /* White text */
  padding: 10px 24px 24px 30px;
  /* Some padding top right bottom left */
  cursor: pointer;
  /* Pointer/hand icon */
  width: 50%;
  max-width:300px; /* set a maximum width if you fancy */
  /* Set a width if needed */
  display: block;
  /* Make the buttons appear below each other */
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 50px;
}

.btn-group button:not(:last-child) {
  border-bottom: none;
  /* Prevent double borders */
}


/* Add a background color on hover */


/* .btn-group button:hover { */

.btn-group-vertical button:hover {
  background-color: #ffffff;
  color: #0b6d11;
}

<div class="btn-group-vertical">
  <button type="button" id="stbButton">First Button</button>
  <button type="button" id="cdbButton">Second Button</button>
</div>

Answered By - dave