使div水平和垂直居中

Question

我是twitter bootstrap 3的新手.

我尝试将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 -->

HTML代码.

CSS代码是 -

    .outer_container
    {
    position:absolute !important;
    height:100% !important;
    width:100% !important;
       display: table !important;
   }

   .inner_container
   {
       display: table-cell !important;
       vertical-align: middle !important;
       text-align:center !important;
   }

并且它提供了类似的输出 -

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

HTML的

<!-- Content -->
    <div class="container outer_container">
        <div class="col-sm-4 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 -->

CSS保持不变 -

.outer_container
   {
    position:absolute !important;
       height:100% !important;
       width:100% !important;
    display: table !important;
   }

   .inner_container
   {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align:center !important;
   }

但我得到的输出像 -

但我希望有一个类似的输出 -

谁能帮帮我吗？

在此先感谢您的帮助.

Answer 1

为了使它水平居中,我会这样:

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