.parent-div {
box-sizing: border-box;
min-width: 0px;
padding: 1rem;
min-height: 1px;
margin: 0;
border: solid 1px;
}
.child-div-one {
box-sizing: border-box;
margin: 0;
min-width: 0px;
min-height: 400px;
display: flex;
border: solid 1px;
}
.child-div-one-of-one {
box-sizing: border-box;
margin: 0;
min-width: 0px;
flex: 1 0 calc(18% - 60px);
margin-right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.child-div-one-of-one-of-one {
box-sizing: border-box;
margin: 0;
min-width: 0px;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-direction: column;
flex-direction: column;
height: 395px; // this is dynamically calculated it can become any value bw 380 and 400px
position: relative;
display: -ms-flexbox;
display: flex;
}
.button-new-one {
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 120px;
border-radius: 2px;
cursor: pointer;
padding: 6px 16px;
position: absolute;
bottom: 0;
}
.child-div-one-of-two {
box-sizing: border-box;
margin: 0 auto;
min-width: 0px;
-ms-flex: 1 0 82%;
flex: 1 0 82%;
display: -ms-flexbox;
display: flex;
border: solid 1px;
}
.child-div-two {
box-sizing: border-box;
margin: 0;
min-width: 0px;
display: -ms-flexbox;
display: flex;
}
.child-div-two-of-one {
box-sizing: border-box;
min-width: 0px;
margin: 0 auto;
}<div class='parent-div'>
<div class='child-div-one'>
<div class='child-div-one-of-one'>
<div class='child-div-one-of-one-of-one'>
<button class='button-new-one'>New One</button>
</div>
</div>
<div class='child-div-one-of-two'></div>
</div>
<div class='child-div-two'>
<div class='child-div-two-of-one'>
<button class='button-less'>Less</button>
<button class='button-more'>More</button>
</div>
</div>
</div>In the provided code, although there is a margin: 0 auto, the button is not centered within the child-div-one-of-two. I am looking to adjust its positioning so that it sits perfectly in the middle of the div. Would adding a margin-left help achieve this, or should the button be centered at 82% instead of 100%?
To clarify, both the "Less" and "More" buttons need to be precisely centered within the above div. Additionally, if the content within the above div increases, the buttons should move down accordingly. How can I accomplish these tasks effectively? Any guidance would be highly appreciated.