Html 在水平方向和垂直方向居中划一个div

我是twitter Bootstrap3的新手

我试着在水平方向和垂直方向居中做一个div

我所做的是-

<!-- Content -->
    <div class="container outer_container">
        <div class="inner_container">
            <h1>Jumbotron heading</h1>
            <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
    </div>
    <!-- End Content -->

它给出了类似的输出-

但是如果我添加一个col-sm-4类，那么代码是-

HTML-

但我得到的输出像-

但我想有一个这样的输出-

有人能帮我吗

---

提前感谢您的帮助。

要使其水平居中，我希望：

<div class="container outer-container">
    <div class="row inner-container">
        <div class="col-lg-4 col-lg-offset-4">
            <!-- Contents... You can change lg for any other size or add more sizes but remember to add the corresponding offset -->
        </div>
    </div>
</div>

有很多方法可以存档。但是，在您的例子中，

.col-sm-4

生成其父宽度的25%。那么为什么不让你的

.inner_容器
25%呢

<div class="container">
   <div class="row jumbo">
       <div class="outer-container">
           <div class="inner-container">
               <h1>Jumbotron heading</h1>
               <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
           </div>
       </div>
   </div>
</div>

.jumbo {
    display: table;
}
.outer-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 500px;
}
.inner-container {
    display: inline-block;
    width: 25%;
}


巨型机头
我是奥迪奥，我是艾格斯塔，我是埃格特码头。这是一种很好的调味品，是一种很好的调味品
jumbo先生{
显示：表格；
}
.外容器{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
高度：500px；
}
.内胆{
显示：内联块；
宽度：25%；
}

看

**注意：您声明的
太多了！重要的。我想你不需要那么多。在主
样式表
使用此选项之前，请检查是否包含了
引导.css
-

<!-- Content -->
    <div class="container outer_container">
        <div class="row-fluid inner_container">
            <div class="col-lg-4 col-lg-offset-4">
                <h1>Jumbotron heading</h1>
                <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>
    </div>
    <!-- End Content -->


巨型机头
我是奥迪奥，我是艾格斯塔，我是埃格特码头。这是一种很好的调味品，是一种很好的调味品
我也尝试过内联编码，但没有成功。使用边距：0自动；如果你的元素有效的话。试试看。你有一个
容器
，后面跟着一个
列
。正确的层次结构是
容器
=>
行
=>
列-？？-##
。感谢您的帮助。但它不起作用。我已经解决了。我的答案中给出了解决办法。
<div class="container outer-container">
    <div class="row inner-container">
        <div class="col-lg-4 col-lg-offset-4">
            <!-- Contents... You can change lg for any other size or add more sizes but remember to add the corresponding offset -->
        </div>
    </div>
</div>

<div class="container">
   <div class="row jumbo">
       <div class="outer-container">
           <div class="inner-container">
               <h1>Jumbotron heading</h1>
               <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
           </div>
       </div>
   </div>
</div>

.jumbo {
    display: table;
}
.outer-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 500px;
}
.inner-container {
    display: inline-block;
    width: 25%;
}

<!-- Content -->
    <div class="container outer_container">
        <div class="row-fluid inner_container">
            <div class="col-lg-4 col-lg-offset-4">
                <h1>Jumbotron heading</h1>
                <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
            </div>
        </div>
    </div>
    <!-- End Content -->