如何划分中间垂直线？

Question

我有这个页面：

http://invata.dac-proiect.ro/invat/index2.html

我希望我的div .container-home垂直对齐中心。

代码HTML：

<div class="container-home" style="width: 900px;height: 696px;background: url(DECUPATE/TEST/images/ppp.jpg);margin: 0 auto;background-size: contain;">
<div class="margine">
<div class="sus">
     <div class="btn"></div>
     <div class="btn2"></div>
</div>

<div class="jos">
     <div class="btn3"></div>
     <div class="btn4"></div>
</div>
</div>


</div>

我该怎么做？

我找到了这些示例，但我们没有实现它们。

http://www.vanseodesign.com/css/vertical-centering/

提前致谢！

编辑：

我补充说：

body{display table;}
.container-home{display:table-cell;vertical-align;middle;}

但没有工作。

Answer 1

您需要在CSS中使用一些精明的定位。将以下内容添加到CSS中的container-home类：

.container-home {
  /* existing code */
  position:relative;
  top:50%;
  transform:translateY(-50%);
}

页面的整个主体现在应垂直和水平居中。