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