How to put two buttons at center of screen

HTML & CSS
1

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: https://jsfiddle.net/walker123/0n8wxcev/9/

Also, pasting my code below:

CSS:

/* .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>
             </div> 
         </div>
      </div>
2

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

There is unwanted code before First Button.

3

That still shows at the top : https://jsfiddle.net/walker123/0n8wxcev/10/show

4

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.

2 Likes
5

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

6

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

Just use flex but remove the column.

e.g.

html,body{margin:0;padding:0;}
.btn-group-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
 /* flex-direction:column;*/
 min-height:100vh;
}

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
7

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.
https://jsfiddle.net/walker123/0n8wxcev/21/show

8

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
9

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