Div не ориентирован на страницу по запросу

Question

Я использую div, который охватывает 100% высокий и 100% широкий независимо от того, какой размер окна браузера или размер экрана, а контент всегда должен быть зафиксирован посередине, но по какой-то странной причине (Наверное, потому, что это был долгий день). Кажется, я не вижу проблемы, почему контент находится в верхней части страницы, будь то посередине, но не в центре внимания сверху вниз?

body{ 
font-family: 'Open Sans', sans-serif; 
color: #FFF; 
height:100%; 
width:100%; 
margin:0; 
padding:0; 
position:relative; 
background-color: #1abc9c; 
} 

#imgDiv { 
position:relative; 
height:100%; 
width:100%; 
background-color: #1abc9c; 
color: #FFF; 
display:table; 
text-align:Center; 
} 

#imgDiv div { 
display:table-cell; 
vertical-align:middle; 
width:100%; 
} 

<div id='imgDiv'> 
     <h1> 
      <img src="img/#.png" style="width: 15%;" /> 
     </h1> 


     <h2> 
     <a href="http://www.#.co.uk/" target="_blank">Link</a> 
     </h2> 



     <center> 
      <a class="rotate" href="https://www.facebook.com/#" target="_blank"><img src="img/facebook.png" class="rotate"></a> 
      <a class="rotate" href="https://twitter.com/#" target="_blank"><img src="img/twitter.png"></a> 
      <a class="rotate" href="https://www.linkedin.com/profile/view?id=#" target="_blank"><img src="img/linkedin.png"></a> 
      <a class="rotate" href="https://dribbble.com/#" target="_blank"><img src="img/dribbble.png"></a> 
     </center> 
</div> 

Вот мой Fiddle

Answer 1

Посмотрите на this fiddle. Вы были на правильном пути, но вам нужно добавить контейнер DIV вокруг imgDiv

HTML

<div id="Container"> 
    <div id='imgDiv'> 
     <h1> 
      <img src="img/#.png" style="width: 15%;" /> 
     </h1> 

     <h2> 
      <a href="http://www.#.co.uk/" target="_blank">Link</a> 
     </h2> 

     <center> 
      <a class="rotate" href="https://www.facebook.com/#" target="_blank"><img src="img/facebook.png" class="rotate"></a> 
      <a class="rotate" href="https://twitter.com/#" target="_blank"><img src="img/twitter.png"></a> 
      <a class="rotate" href="https://www.linkedin.com/profile/view?id=#" target="_blank"><img src="img/linkedin.png"></a> 
      <a class="rotate" href="https://dribbble.com/#" target="_blank"><img src="img/dribbble.png"></a> 
     </center> 
    </div> 
</div> 

CSS

html, body{ 
font-family: 'Open Sans', sans-serif; 
color: #FFF; 
height:100%; 
width:100%; 
margin:0; 
padding:0; 
background-color: #1abc9c; 
} 

#imgDiv { 
height:100%; 
width:100%; 
background-color: #1abc9c; 
color: #FFF; 
text-align:center; 
display:table-cell; 
vertical-align:middle; 
} 

#Container{ 
    display: table; 
    height: 100%; 
    width: 100%; 
} 

Answer 2

Вообще говоря, height: 100% не работает как вы ожидали этого в большинстве браузеров, когда применяется к DIV.

Для чего я могу думать, у вас есть несколько вариантов.

1) Используйте таблицу, чтобы сформировать ваш макет. height: 100%делает работает только отлично, но использование таблиц для макета, как правило, неодобрительно (хотя и является функциональным вариантом).

2) Вы можете обернуть imgDiv внутри ряда других DIVs, и применить стили display: table и display: table-cell соответственно, а затем иметь DIV клеток с vertical-align: middle, но, честно говоря, если вы собираетесь сделать это, я d просто перейдите к # 1 и используйте фактическую таблицу. ПРИМЕЧАНИЕ: Это не работает во всех браузерах.

3) Вы можете применить эти стили к своему DIV: position:absolute; top:50%; height:400px; margin-top:-200px; Это приведет к тому, что ваш DIV будет расположен на полпути вниз по странице и даст ему верхнюю границу отрицательной половины высоты, в итоге вы окажетесь посередине DIV в середине страницы. Конечно, вы можете играть с высотой и маржой, как вы сочтете нужным, чтобы получить ее именно там, где вам это нравится.