Как я могу вертикально и горизонтально центрировать DIV? - PullRequest
Новая
       32

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

2 голосов
/ 16 марта 2012

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

CSS: 

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

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

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

1 Ответ

5 голосов
/ 16 марта 2012

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

Ваш 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;
}

Удачи!

Редактировать: Вот пример выше - http://jsbin.com/aguciw

...