How to put two buttons at center of screen

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.

Also, using margin:auto seems to be putting it at the center but then the margin-bottom:50px doesn’t work.

Here is the JSFiddle:

Also, pasting my code below:


/* .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: 20px 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;
     /*  margin: auto */
    .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;

Here is HTML:

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

Put margin:auto before margin-bottom:50px (or use margin: 0px auto 50px).

There is unwanted code before First Button.

That still shows at the top :

So you could make the div flex and use flex box. Then make the div height 100vh.

display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;

That worked fine when playing around with your js fiddle.


Thanks. One more question - if I have to put both the buttons side by side and not on top of each other. and still, put them on the center of the screen , is changing display: inline enough? It seems to be putting it at top left and not at the center as shown in the JS fiddle

No, you can’t apply dimensions to inline elements.

Just use flex but remove the column.


.btn-group-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
 /* flex-direction:column;*/

I also suggest using min-height otherwise the element will be cut off if you add other stuff into a small viewport. Also you were 8px out because you didn’t negate the margin on the body.

1 Like

Thanks @PaulOB . Working fine after making the changes you suggested. I want to make buttons very big to cover the half screen so that should be possible with the padding I believe.

If you mean half the width and the height then play around with this.

.btn-group-vertical button {width:48vw;max-width:none;min-height:50vh;margin:0;}

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.