How to middle vertical line that division?

Question

I have this page:

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

I want my div .container-home to be align vertically to the center.

CODE 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>

How do I do this?

I found these examples but we did not implement them.

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

Thanks in advance!

EDIT:

I add:

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

but not working.

I tried to implement them but I could not ... I tried several of them — Cristi, Jun 05 '15 at 14:11
Nest it in a div with CSS of `display: table-cell; vertical-align: middle` and nest that in a div with CSS of `display: table` — Jay, Jun 05 '15 at 14:12
yes where you have to add these properties? which elements? This is my problem — Cristi, Jun 05 '15 at 14:18

score 0 · Answer 1 · answered Jun 05 '15 at 14:25

You need to use some savvy positioning in your CSS. Add the following to your container-home class in the CSS:

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

The entire body of the page should be vertically and horizontally centered now.

How to middle vertical line that division?

1 Answers1