CSS Flexbox: How to align buttons on center

HTML-CSS
1

I am trying to align two buttons to the center of the page. Whenever I try to but align-items on my container it doesn’t do anything.
Here is my CSS:

.container {
   display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

}

and HTML:

<body>

        <div>   
            
                <h1>Pomodoro app</h1>
        </div>
    <div class="container">
        <div class="buttons">
                <button type="button" class="btn btn-primary btn-lg">Large button</button>
                <button type="button" class="btn btn-secondary btn-lg">Large button</button>
        </div>
       
    </div>
    
</body>
2

It’s aligning the immediate child of the container I.e class buttons, you can either change the flex container to the class buttons or take out class buttons and let the immediate childs of the class container be the buttons. Also you may want to give the flex container some width.

3

@fkhan698
Are you using some kind of CSS framework such as Bootstrap? You will have to make sure that you CSS overrides the CSS of the framework by importing you custom CSS file after the CSS framework. Like this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/mycustomstyle.css">

Or you may have to set the height on the .buttons container.

.buttons {
  width: 100%;
  height: 200px;
}
4

I tried it in JSFiddle and it worked well.

5

I tried to do what you told me as goes ` 

            <button type="button" class="btn btn-primary btn-lg">Large button</button>
            <button type="button" class="btn btn-secondary btn-lg">Large button</button>
    
   
</div>`

But that still didn’t do what I wanted
What I’m trying to do with my buttons is something like this

35%20PM

6

I don’t quite understand what you are wanting to do, the flex alignment you have now is acting on .buttons div, if you take out that div then the alignment will act on the buttons, justify-content always acts in the flex direction of the container (in your case row) , align-items acts in the orthogonal direction (column in your case) of the flex-direction, perhaps you are wanting justify-content: space-around ? like this below (green is your current container area, I gave the container some height)
https://codepen.io/Dee73/pen/KYLEpR

7

@fkhan698 Post a link to your project so we can see what it looks like now in Codepen.

8

Check the height of your body element, it might not span the whole view height.

9

I figured out what I was trying to do. Sorry if I could not explain it so well. Basically I just wanted my buttons dead in the center of the page looking like this

24%20AM
24%20AM2878×1576 131 KB

To do that I just put the buttons in a class .buttons and changed my CSS to this

.buttons {
    display: flex;
    /* margin-top: 400px; */
    height: 500px;
    align-items: center;
}
10

Bookmark this