How to vertically center a div inside another div that does not have pre determined height? (has height auto)

Question

So I already have done this once in this page: link to the website's page

In this page I was able to vertically center the text displayed on the image:

That column has 2 codes that make the text centered: This one is added to the mother div

.academy-pc .one-third.mcb-wrap {
    float: none;
    display: table-cell;
    position: relative;
}

and this one is on the child div that has the text:

.academy-pc .vertic-center {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

I've been trying to apply the same logic on this page but without success: page link

I wanted to vertically center the text in this image bellow but I just can't find a way.

Any help? thanks in advance

score 0 · Accepted Answer · answered Oct 03 '19 at 18:02

0

Into the .section_wrapper .mcb-section-inner add

display: flex; 
justify-content: center;
align-items: center;

then everything inside will be vertically centered.

Of course you don't need to add padding: 200px 80px 0px 80px;

answered Oct 03 '19 at 18:02

Grzegorz T.

Thanks alot, really!! I upvoted your answer and maked it as correct, is there anything else I could do? Don't want to miss out on anything. Thanks again – Daniel Almeida Oct 03 '19 at 18:16
1

Check the page speed at every stage of the work, now something is wrong. If Google is offended, it will ban the page for slow loading, or it will not show in the search results. [web.dev](https://web.dev/), [pagespeed](https://developers.google.com/speed/pagespeed/insig), [webpagetest](https://www.webpagetest.org/), [gtmetrix](https://gtmetrix.com/) – Grzegorz T. Oct 03 '19 at 18:30

1 Answers1