垂直中心所有内容在巨型加速器内

Question

如何在引导3中水平和垂直地将巨型加速器的所有内容中心化？我才刚开始学。

以下是我的代码：

<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

html, body {
    height: 100%;
    background-color: #333;
}
.site-wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    box-shadow: inset 0 0 100px rgba(0,0,0,.5);
    border-top: 5px solid #5A332B;
}
.jumbotron {
    background-color: #ccbb99 !important;
    /*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
    height: 100%;
    margin-bottom: 0;
}
.lefty {
    margin: 0;
}

Answer 1

您可以使用transform: translateY垂直对齐内容如下。

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

http://www.bootply.com/MlRejPA7m2

使用text-center对齐

Answer 2

使用CSS代码可以实现以下目标：

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