Bootstrap : how to vertically center a row in a container

Question

I am asking for help here today because I'm trying to vertically center a div on my webpage (I'm working with Bootstrap) .

I managed to do it at first by doing this :

<div class="row h-100">
  <div class="col-md-3 my-auto">
    <img src="public/img/1.jpg" class="img-circle img-no-padding img-responsive" alt="Rounded Image" width=200 height=200>
  </div>
  <div class="col-md-9 my-auto">
    <h1 class="merriweather text-white mb-3">Title</h1>
    <p class="merriweather text-white">Again and again, we've seen him make tough choices when easier ones were available.</p>
    </div>
  </div>
</div>

But then in my code, I had to add a div class="container" :

<div class="container">
  <div class="row h-100">
    <div class="col-md-3 my-auto">
      <img src="public/img/1.jpg" class="img-circle img-no-padding img-responsive" alt="Rounded Image" width=200 height=200>
    </div>
    <div class="col-md-9 my-auto">
      <h1 class="merriweather text-white mb-3">Titre</h1>
      <p class="merriweather text-white">Again and again, we've seen him make tough choices when easier ones were available.</p>
    </div>
  </div>
</div>

And when I do that, I don't know why, but it doesn't work anymore. I tried other things like using a "align-self-center" class, but nothing works.

Could you please help me figure out why my code isn't working when I had the "container" class around, and how do I get this to be vertically centered ?

Thanks

Possible duplicate of [Vertical Align Center in Bootstrap 4](https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap-4) — A. Meshu, Jul 13 '19 at 19:55

score 0 · Answer 1 · answered Jul 14 '19 at 04:45

Either way, you can do using CSS by using position and transform property.Mske sure that parent element should be set relative

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

<div class="container">
  <div class="row h-100 center">
    <div class="col-md-3 my-auto ">
      <img src="public/img/1.jpg" class="img-circle img-no-padding img-responsive" alt="Rounded Image" width=200 height=200>
    </div>
    <div class="col-md-9 my-auto">
      <h1 class="merriweather text-white mb-3">Titre</h1>
      <p class="merriweather text-white">Again and again, we've seen him make tough choices when easier ones were available.</p>
    </div>
  </div>
</div>

Bootstrap : how to vertically center a row in a container

1 Answers1