html - 在未知高度 DIV 内垂直居中 DIV

Question

我目前有这个 HTML:

<div id:root>
  <div id:contents>
    <h3>I am the one that need to be vertical centered.</h3>
    <p>Lorem300..............</p>
  </div>
  <img scr:"somewhere.jpg"></img>
</div>

以及当前的 SASS:

img
  width: 100%
  height: inherit

我要解决的问题是我希望“根”DIV 的大小与 img 完全相同。在这种情况下，img 宽度设置为 100%，这意味着它始终占据视口(viewport)的 100% 宽度。有没有一种方法可以使“内容”DIV 垂直居中到“根”DIV？非常感谢。我花了一整天，仍然一无所获。即使我使用:

#contents
  top: 50%
  transform: translateY(-50%)

'contents' div 占用主体的高度，而不是'root' div。 :(

有什么办法可以解决这个问题吗？谢谢!

Answer 1

.center_block{
	  position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

<div class="center_block">
  <div>
    <h3>I am the one that need to be vertical centered.</h3>
    <p>Lorem300..............</p>
  </div>
  <img scr="somewhere.jpg" class="img-responsive" />
</div>