Как можно вертикально и горизонтально центрировать DIV?

Question

Поведение моего фонового изображения заключается в том, что изображение всегда идеально по центру, когда я изменяю размер окна браузера. Он попадает в верхнюю, левую, правую и нижнюю части же «расстояние» до края окна моего браузера.

CSS-:

background-image: url("ipad.jpg"); 
background-position: 50% 50%; 
background-repeat: no-repeat; 
background-size: 563.5px 800px; 

У меня есть DIV, перекрывающий этот образ, и я хотел бы, чтобы вести себя таким же образом, как фоновое изображение, так что он всегда в центре выше фонового изображения в том же место.

Возможно ли это? И если да. Как? Надеюсь, вы понимаете, чего я хочу достичь. :) Большое спасибо за вашу помощь. : D

Answer 1

Похоже, вы пытаетесь центрировать контент как горизонтально, так и вертикально, независимо от размера окна браузера. Если это так, попробуйте что-то вроде этого:

Ваш HTML:

<div class="outer"> 
    <div class="middle"> 
     <div class="inner"> 
      The content that you want centered. 
     </div> 
    </div> 
</div> 

Ваш CSS:

/* Vertical and horizontal centering */ 
.outer { 
    position:fixed; 
    top:0; left:0; 
    width:100%; height:100%; 
} 
.middle { 
    height:100%; 
    display:table; 
    margin:0 auto; 
} 
.inner { 
    vertical-align:middle; 
    display:table-cell; 
} 

Успехов!

Edit: Вот пример выше - http://jsbin.com/aguciw