Vertically center content [duplicate]

问题

This question already has answers here:

Twitter Bootstrap 3, vertically center content [duplicate] (2 answers)

Closed 2 years ago.

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?

回答1:

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

回答2:

You may try,

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

No need for display table-cell

来源：https://stackoverflow.com/questions/42983183/vertically-center-content