Html 将jumbotron内的所有内容垂直居中

如何在bootstrap 3中水平和垂直居中放置jumbotron的所有内容？我刚刚开始学习

以下是我的代码：

HTML

<div class="site-wrapper">
    <div class="jumbotron">
        <h1>Header</h1>
        <p id="subHeader"><small>sub header</small></p>
        <div class="container">
            <div class="row">
                <div class="col-sm-5 col-sm-offset-2">
                </div>
                <div class="col-sm-3 lefty">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 col-sm-offset-4">
                </div>
            </div>
        </div>
    </div>
</div>

---

使用CSS代码实现这一点：

.jumbotron{disply:flex;
align-content:center;
justify-items:center;
align-items:center;
}

---

您可以使用

transform:translateY

像这样垂直对齐内容

.centerme {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

---

使用

text center

水平对齐

使用flex-direction:column不使用flex-direction:column，所有内容都位于中心，但它们是水平的。如果使用flex column，则不会发生任何更改。请使用ColumSensory而不是ColumSensory，我的评论中有一个打字错误，我使用了

column

，但没有任何更改，我的意思是内容没有进入中心。

.centerme {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}