How to vertically center row in container?

Question

By default the row aligns to the top.

I tried to put margin-top: auto; and margin-bottom: auto; but doesn't work. Also vertical-align: middle; also does not work.

Is there an easy fix to this?

Thanks

.container {
background-color:black;
height: 100px;
}

.row {
background-color:#fff;
height: 50px;
}

<div class="container">
  <div class="row">
  </div>
</div>

I have been looking through other solutions, but they are not specific about rows in bootstrap. — suonpera, Mar 07 '17 at 11:00

score 17 · Answer 1 · edited Jan 07 '19 at 08:16

17

You can use flexbox for this:

.row {
    display: flex;
    align-items: center;
    justify-content: center;
}

edited Jan 07 '19 at 08:16

Arosha De Silva

597
8
18

answered Mar 07 '17 at 11:07

Super User

9,448
3
31
47

Use this in the parent of the element you want to center vertically! Works like a charm! – Thalis Vilela Apr 09 '19 at 18:33
nice answer! :) – MonneratRJ Apr 27 '21 at 16:26

score 3 · Answer 2 · edited May 23 '17 at 12:09

Basically, this question is a duplicate. There are various centering methods for Bootstrap explained in that question. This will work specifically for your scenario with the row inside the container. Here are 2 different methods..

// method 1 flexbox
.container-flex {
    display: flex;
    align-items: center;
}

// method 2 translatey
.v-center {
    position: relative;
    transform: translatey(-50%);
    top: 50%;
}

http://www.codeply.com/go/b6wTQTzoe1

score 0 · Answer 3 · answered Mar 07 '17 at 10:58

0

Set width and height for row and

.row {
    margin: 0 auto;
}

answered Mar 07 '17 at 10:58

Grak T

26
4

That is for horizontal alignment, not vertical – Ben Lonsdale Mar 07 '17 at 11:02

score 0 · Answer 4 · answered Mar 07 '17 at 11:08

<div class="inner">
    <p>
      Text
    </p>
</div>

.inner {
  height: 200px;
  width: 300px;
  background: orange;
  vertical-align: middle;
  display: table-cell;
}

The "Text" should be vertically aligned. Display table-cell works with vertical-align. I think it should be possible to do it with inline-elements too.

How to vertically center row in container?

4 Answers4

Linked