How to vertically align and evenly distribute two buttons? - html

Question

I'm trying to align the two buttons to be horizontally centered, and evenly distributed vertically on the browser window like the following photo:
#buttonArea {
display: flex;
flex-direction: column;
}
#addButton {
margin: auto;
display: block;
}
#eraseButton {
margin: auto;
display: block;
}
<div id="buttonArea">
<button id="addButton">ADD</button>
<button id="eraseButton">ERASE</button>
</div>
The buttons are horizontally centered, but I don't know how to vertically align them so they are evenly distributed. (e.g. ADD: 33.33%, ERASE: 66.66%)
How can I align the buttons like my photo?

Answer 1

Use justify-content: space-around to distribute equal vertical space around each button and align-items: center to horizontally align the elements.
Just a side note, justify-content applies to the main axis and align-items applies to cross axis. Normally, justify-content applies to the x-axis since the default value for flex-direction is row. However, since we used flex-direction: column, the main axis is now the y-axis.
#buttonArea {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100vh;
border: 1px solid black;
}
<div id="buttonArea">
<button id="addButton">ADD</button>
<button id="eraseButton">ERASE</button>
</div>

Answer 2

HTML
<div id="Area">
<div class="container">
<button id="addButton">ADD</button>
<button id="eraseButton">ERASE</button>
</div>
</div>
CSS
#Area {
width: 100vw;
height: 100vh;
}
.container{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center
}
addButton, eraseButton{
width: 50px;
display: inline-block,
}
What I am doing is
You need to set the width the height of the page so that you can set the items in place you want.
Then will set the container of button to height: 100% because u want to align horizontally centered, and evenly distributed vertically.
Next most important thing is justify-content: space-around; Since you are using flex I hope you know this

Answer 3

You need to add position:relative to the parent div and then for the buttons add position: absolute; and use the top: xx %; property to align it vertically at 33% and 66% of the height.
#buttonArea {
display: flex;
justify-content: center;
align-items: center;
height: -webkit-fill-available;
width: 100%
position:relative;
text-align:centre;
}
#addButton {
display: block;
top: 33.33%;
position:absolute;
}
#eraseButton {
top: 66.66%;
position:absolute;
display: block;
}
<div id="buttonArea">
<button id="addButton">ADD</button>
<button id="eraseButton">ERASE</button>
</div>
Hope this helps. Cheers!

Answer 4

Use position:relative and manage the coordinates accordingly