I am looking to create a header image with a semi-circular bottom. The challenge I'm facing is centering the div containing the title and button using flexbox or bootstrap. While mx-auto (margin x auto) works, my-auto doesn't have the same effect. Additionally, the align-self-center and align-items-center classes do not seem to work either - I have to resort to using mx-auto for centering. To center the circular bottom properly, I end up having to apply margin-left: -25vw. What would be the most effective method to achieve centered divs in this case?
Here is the code snippet:
.image-wrapper {
position: relative;
width: 100vw;
height: 100%;
overflow: hidden;
}
.circular-bottom {
width: 150vw;
height: 90vh;
margin-left: -25vw;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
overflow: hidden;
}
.circular-bottom img {
z-index: -1;
}
.title-box {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
.title-text {
text-align: center;
width: 40%;
}<div class="image-wrapper">
<div class="circular-bottom d-flex justify-content-center">
<img src="url/image" draggable="false">
</div>
<div class="title-box d-flex">
<div class="title-text align-self-center">
<h1>Title</h1>
<a class="btn" href="#">button text</a>
</div>
</div>
</div>The image-wrapper prevents horizontal scrolling. The circular-bottom element helps create the circular bottom by utilizing overflow hidden and extending its width for the shape of the circle. This also explains why the image cannot be set as a background image, as it needs to be cropped using overflow:hidden.