I’m trying to center a button (‘retart_button’) within a positioned container (res_centered_div) using Flexbox in CSS, but I’m facing some alignment issues. Here’s my current setup:
body,
html,
#root {
margin: 0;
padding: 0;
height: 100%;
}
.product-card {
padding: 16px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
text-align: center;
margin: 10px;
}
.product-image {
max-width: 100%;
height: auto;
}
.slick-slider {
max-width: 800px;
margin: auto;
}
.slick-list {
overflow: visible;
}
.slick-slide {
display: flex;
justify-content: center;
align-items: center;
}
.res_home_container {
display: flex;
flex-direction: column;
width: auto;
height: 526px;
}
.res_image_container {
position: absolute;
display: inline-block;
height: 536px;
width: 100%;
}
.res_image_container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #00000059;
z-index: 1;
}
.res_image_container img {
width: 100%;
display: block;
position: absolute;
z-index: 0;
}
.res_centered_div {
width: 585px;
height: 330px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
display: grid;
justify-content: center;
align-items: center;
gap: 32px;
z-index: 2;
color: white;
border-radius: 8px;
}
.res_top_image {
width: 90rem;
height: 32.875rem;
top: -10px;
}
.res_title_container {
max-width: 583px;
height: 136px;
height: auto;
font-family: Grange;
font-size: 40px;
font-weight: 600;
line-height: 44px;
text-align: center;
gap: 16px;
display: inline-block;
word-wrap: break-word;
}
.res_text_container {
width: 563;
height: 131px;
font-family: Proxima Nova;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
margin: 0 auto;
margin-top: 32px;
gap: 32px;
display: flex;
}
.retart_button {
width: 238px;
height: 47px;
padding: 14px 40px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
border: 1px solid #ffffff;
background-color: transparent;
}
.res_button_text {
width: 110px;
height: 19px;
font-family: Proxima Nova;
font-size: 16px;
font-weight: 500;
line-height: 19.49px;
text-align: center;
color: #ffffff;
}<div><div class="res_home_container"><div class="res_image_container"><img src="/src/assets/result_page_img.jpg" class="res_top_image" alt="Descriptive Alt Text"><div class="res_centered_div"><div class="res_title_container">Build you everyday self care routine.<div class="res_text_container">Perfect for if you're looking for soft, nourished skin, our moisturizing body washes are made with skin-natural nutrients that work with your skin to replenish moisture. With a light formula, the bubbly lather leaves your skin feeling cleansed and cared for. And by choosing relaxing fragrances you can add a moment of calm to the end of your day.</div></div><button class="retart_button"><a href="/"><span class="res_button_text">Retake the quiz</span></a></button></div></div></div><div><div class="outer_container"><div class="info_slide"><div class="info_container"><div class="res_title">Daily routine</div><div class="res_text">Perfect for if you're looking for soft, nourished skin, our moisturizing body washes are made with skin-natural nutrients that work with your skin to replenish moisture. With a light formula, the bubbly lather leaves your skin feeling cleansed and cared for. And by choosing relaxing fragrances you can add a moment of calm to the end of your day.</div></div></div><div class="product"><div class="inner_container"><div class="image_component"><div class="icon_heart"><button class="heart_button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart heart_icon active" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path></svg></button></div><img src="https://cdn.shopify.com/s/files/1/0030/1989/8915/products/10-in-1_leave_in_moisturer.png?v=1695095354" class="product_image" alt="A Tall Drink Of Water 10-In-1 Leave-In Moisturiser 150ML"></div><div class="title_price"><div class="title">A Tall Drink Of Water 10-In-1 Leave-In Moisturiser 150ML</div><div class="price">$27.95</div></div></div></div><div class="product"><div class="inner_container"><div class="image_component"><div class="icon_heart"><button class="heart_button"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart heart_icon active" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path></svg></button></div><img src="https://cdn.shopify.com/s/files/1/0030/1989/8915/products/New_Project.png?v=1597795136" class="product_image" alt="Infusions Argan Oil & Hemp Seed Conditioner 473ml"></div><div class="title_price"><div class="title">Infusions Argan Oil & Hemp Seed Conditioner 473ml</div><div class="price">$24.95</div></div></div></div></div><div><div class="next_icon"><svg class="frame"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="svg-inline--fa fa-chevron-right the_icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"></path></svg></svg></div></div><div class="ellipse_container"><div class="ellipse active"></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div><div class="ellipse "></div></div></div></div>Despite using justify-content: center; and align-items: center; on .res_centered_div, the button (res_start_button) inside it is not perfectly centered. What am I missing here? How can I ensure that the button is centered both vertically and horizontally within its container?
Additional Context:
The .res_centered_div is positioned absolutely to achieve a specific layout.
I’ve tried adjusting margins and padding within .res_start_button, but it doesn’t seem to align perfectly.
Any insights or suggestions would be greatly appreciated! Thank you.
New contributor
Bat Kolio is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.