Question

如何在引导程序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

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;
}

垂直居中于jumbotron内的所有内容

2 个答案: