Vertically Align A Flexbox

There are three buttons (button 1, button 2 and button 3) in a flexbox (myflex). How can I put this flexbox at the bottom of the screen and center it horizontally? I can center it,

Solution 1:

In order to move an element vertically, the container must have extra height.

Unlike width, which block elements fill 100% by default, heights must be defined. Otherwise, elements default to auto – the height of the content.

In your code, there is no height specified, so your flex container has no extra space for alignment. For an illustration, set borders around the body element and your container:

body {
  border: 2px dashed red;
  padding: 1px;
}

#myflex {
  display: flex;
  bottom: 20px;
  justify-content: center;
  border: 1px solid red;
}

<divid="myflex"><buttonclass="button button1">button 1</button><buttonclass="button button2">button 2</button><buttonclass="button button3">button 33</button></div>

Once you have the height issue resolved, you can use flex keyword properties or auto margins to center-align the flex container at the bottom.

Method 1: Flex Keyword Properties

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

<divid="myflex"><buttonclass="button button1">button 1</button><buttonclass="button button2">button 2</button><buttonclass="button button3">button 33</button></div>

Method 2: Flex Auto Margins

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
}
#myflex {
  margin-top: auto;
}

<divid="myflex"><buttonclass="button button1">button 1</button><buttonclass="button button2">button 2</button><buttonclass="button button3">button 33</button></div>

OR, if you want the footer to remain fixed on the screen, try this:

Method 3: Fixed Positioning

body {
  height: 100vh;
  margin: 0;
}
#myflex {
  position: fixed;
  display: flex;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

<divid="myflex"><buttonclass="button button1">button 1</button><buttonclass="button button2">button 2</button><buttonclass="button button3">button 33</button></div>

---