When trying to move an element vertically, it is essential for the container to have additional height.
Unlike width, where block elements automatically fill 100%, heights need to be explicitly defined. Otherwise, elements will default to auto, taking on the height of their content.
If your code lacks a specified height, your flex container won't have the necessary space for alignment. To visualize this, add 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;
}
<div id="myflex">
<button class="button button1">button 1</button>
<button class="button button2">button 2</button>
<button class="button button3">button 33</button>
</div>
Once you address the height issue, you can utilize 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;
}
<div id="myflex">
<button class="button button1">button 1</button>
<button class="button button2">button 2</button>
<button class="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;
}
<div id="myflex">
<button class="button button1">button 1</button>
<button class="button button2">button 2</button>
<button class="button button3">button 33</button>
</div>
If you prefer to keep the footer fixed on the screen, you can try this method:
Method 3: Fixed Positioning
body {
height: 100vh;
margin: 0;
}
#myflex {
position: fixed;
display: flex;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
<div id="myflex">
<button class="button button1">button 1</button>
<button class="button button2">button 2</button>
<button class="button button3">button 33</button>
</div>