Vertically center content

Question

How can I vertically center the whole content of body in Bootstrap? I've two row. I've tried with display: table-cell, but the rows stays in the same row (sorry for the words joke).

HTML

<div class="container container-table">
    <div class="row vertical-center">
        [...]
    </div>
    <div class="row vertical-center">
        [...]
    </div>
</div>

CSS

html, body, .container-table {
    height: 100%;
}

.container-table {
    display: table;
}

.vertical-center {
    display: table-cell;
    vertical-align: middle;
}

Any suggestion?

I'm not sure I'm understanding you correctly, but you try `display: flex; align-items: center; justify-content: center;` on `.container` or `.container-table` — Jack, Mar 23 '17 at 17:39
Or this: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 — Carol Skelly, Mar 23 '17 at 17:48

score 1 · Accepted Answer · answered Mar 23 '17 at 17:47

Try wrapping both rows in a single "vertical-center" container.

<div class="container container-table">
  <div class="vertical-center">
    <div class="row">
      [...]
    </div>
    <div class="row">
      [...]
    </div>
  </div>
</div>

See fiddle

score 0 · Answer 2 · answered Mar 23 '17 at 17:46

0

You may try,

 .content-table{
    position: relative;
    transform: translateY(-50%);
    top: 50%;
    display: block;
   }

No need for display table-cell

answered Mar 23 '17 at 17:46

LIJIN SAMUEL

883
4
12

Vertically center content

2 Answers2

Linked