Вертикально и горизонтально центрируя переменную размера div - PullRequest
Новая
       16

Вертикально и горизонтально центрируя переменную размера div

3 голосов
/ 29 ноября 2011

У меня есть div, ширина и высота которого являются фиксированным процентом окна браузера, скажем, 70% и 80%, с определенными min-width и min-height.Я хочу, чтобы этот div отображался как вертикально, так и горизонтально по центру в окне браузера.Поскольку размер окна браузера изменен, я хочу, чтобы размер div автоматически изменялся, а также оставался в центре.

Во-первых, это не div фиксированной ширины или высоты, поэтому я не могу использовать позиционирование absolute сотрицательные поля.Я использовал обычный position: static и установил левое и правое поля для auto для горизонтального центрирования.Это обеспечивает автоматическое изменение размера и центрирование при изменении размера окна браузера только в горизонтальном направлении .Такие вещи не работают для вертикального центрирования.И я не могу использовать отрицательные поля для этого, поскольку позиция не absolute (мне нужно, чтобы она была static для горизонтали).

Я видел здесь и здесь в StackOverflow, что может быть решение для div с переменным размером с помощью display:table-cell.Есть ли какое-либо другое решение, может быть, немного проще, использующее только некоторые настройки position, margin и т. Д.?

Заранее большое спасибо!

1 Ответ

1 голос
/ 29 ноября 2011

Вы также можете попробовать что-то действительно простое, например: 

<head>
<style type="text/css">
body, html {
    height:100%;
    margin:0;
}
#div1 {
    height:10%;
}
#div2 {
    background:#F00;
    height:80%;
    margin:0px auto;
    width:80%;
}
#div3 {
    height:10%;
}
</style>
</head>

<body>
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <div id="div3">
    </div>
</body>
</html>

Конечно, эта техника требует дополнительных div, что делает ее не такой уж сексуальной - но я совершенно уверен, что это довольно крест-безопасный сейф ...

...