Trying to center the "input" div below the "InputBelow" div using "flex-direction: column" is causing issues with "justify-content; center."
The goal is to center the main "border" div in the middle of the screen and align the other elements inside it.
.border {
height: 300px;
width: 700px;
margin: auto;
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
border: 3px solid;
border-radius: 45px;
border-color: black;
display: flex;
justify-content: center;
flex-direction: column;
}
.calcText {
color: black;
font-size: 44px;
margin: 35px;
}
.value {
height: 10px;
width: 50px;
}<div class="border">
<div class="calcText">Input Below</div>
<input class="value" type="text">
</div>