垂直居中不起作用，因为行不会达到 100% 高度

Question

我正在尝试将引导容器中的一些 div 垂直居中，该容器可以根据其他列的内容调整大小。为了向后兼容，我想在没有 flexbox 的情况下执行此操作。

我正在尝试 translateY() 技巧，但父行的高度为 0，因此它以行的顶部而不是中间为中心。

我读到浮动项目会占用他们孩子的高度，所以我尝试浮动它们，但它仍然没有占用高度。

我怎样才能使这一行达到 100%，以便垂直居中正常工作？

    .container{
      margin-top: 60px;
    }

    .outer, .container{
      border: 1px solid #000;
    }

    .row-center{
      position: relative;
      /* This needs to be 100% height but I can't figure it out */
      /* I added the floats but it didn't help */
      height: 100%;
      float: left;
    }

    .outer{
      position: absolute;
      float: left;
      top: 50%;
      transform: translateY(-50%);
    }

    <div class="container">
      <div class="row">
        <div class="col-sm-5"><img src="http://placehold.it/350x500"></div>
        <div class="col-sm-7 row-center">
          <div class="outer">
            <div class="one">some text</div>
            <div class="two">some text</div>
          </div>
        </div>
      </div>
    </div>

（示例代码假定引用了引导 css）

附带引导程序的代码笔：http://codepen.io/GuerrillaCoder/pen/obJEgB

Answer 1

试试：

.outer, .container{
    border: 1px solid #000;
    vertical-align: -webkit-baseline-middle;
    padding: 5px;
}

.row-center{
    position: relative;
    width: auto;
    height: 100%;
    float: left;
}

如果这不起作用，则为该div 申请padding。

Answer 2

将position: unset; 给.row-center 和position:relative; 给.row 将为您工作。

Working Fiddle