Vertically align element inside div

Question

I'm having trouble aligning vertically my h3 element in my dim div.

I've tried some methods but none of them seemed to work.

This is what I have:

I want that "NEW WAVE" h3 to be centered vertically inside that faded box, I managed to align it horizontally with justify-content-center but the align-items-center for vertically is not working.

Im using Bootstrap 4 btw.

here's my HTML code:

<div class="container d-flex justify-content-center">
    <div class="dim">
        <div class="new-wave d-flex justify-content-center align-items-center">
            <h3>NEW WAVE</h3>
        </div>
    </div>
</div>

score 1 · Answer 1 · answered Apr 14 '18 at 18:22

1

Please try this.

.new-wave.d-flex.justify-content-center.align-items-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

answered Apr 14 '18 at 18:22

Abhishek Mishra

192
1
7

Wow! this one worked as well, thanks man! – Victor Blanco Apr 14 '18 at 18:34
If it was the appropriate answer for you then please UPVOTE my answer. – Abhishek Mishra Apr 14 '18 at 19:01
I's love to but I still don't have the reputation required to do so :( – Victor Blanco Apr 14 '18 at 21:14

score 0 · Answer 2 · answered Apr 14 '18 at 18:30

0

Did you try to add this flex class to the parent container - .dim - ?

answered Apr 14 '18 at 18:30

That was it! Thanks man! – Victor Blanco Apr 14 '18 at 18:33
No problem dude ! :) – Apr 14 '18 at 21:04

Vertically align element inside div

2 Answers2