Twitter bootstrap 3 Twitter引导3垂直对齐

我使用的是Bootstrap3，有两列内容

第一列是图像。 第二列是一些文本

现在我要做的是使行占据浏览器窗口的整个高度，并使第一列中的图像和第二列中的文本水平和垂直居中。我尝试了Stackoverflow的所有解决方案，但没有成功

下面是我使用的代码：

    <div class="container" style="height:100%;"> 

      <div class="row">

        <div class="col-sm-6"> <img src="img/logo_frontpage.png" class="img-responsive center-block" style="height:70%; width:70%" alt=""> </div> <!-- should be vertical centre -->

        <div class="col-sm-6"> 
          <!-- start -->
          <div id="start" style="display:block;"> <!-- should be vertical centre -->
            <h1 class="text-center">Welcome!</h1>
            <p class="text-venter">to</p>
            <h3 class="text-center" >my site<br /></h3>
          </div>

         </div>
         </div>
         </div>

---

我很难让容器填满整个屏幕区域，并使两列垂直居中。

Stackoverflow不是CSS技术的唯一来源。你可以在CSS-Tricks.com和其他地方找到很多信息。 演示：

CSS

HTML

@media (min-width:768px) { 
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    .container.my-container {
        display: table;
        height: 100%;
    }
    .my-container .row {
        display: table-cell;
        height: 100%;
    }
    .my-container .col-sm-6 {
        display: table-cell;
        border: 5px dashed pink;
        height: 100%;
    }
    .my-container .col-sm-6 .inner {
        display: table;
        height: 100%;
        width:100%;
    }
    .my-container .col-sm-6 .inner > div {
        display: table-cell;
        vertical-align: middle;
        width: 100%:;
    }
}

/* fluid image */
img.img-full-width {width:100%;}

<div class="container my-container">
   <div class="row">
      <div class="col-sm-6">
         <div class="inner">
            <div>
               <img src="http://placehold.it/600x300/555555/FFFFFF&text=image+1" class="img-full-width img-responsive" />
            </div>
         </div>
      </div>
      <div class="col-sm-6 one">
         <div class="inner">
            <div>
               <ol>
                  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                  <li>Aliquam tincidunt mauris eu risus.</li>
                  <li>Vestibulum auctor dapibus neque.</li>
               </ol>
            </div>
         </div>
      </div>
   </div>
</div>