В вертикальном и горизонтальном центрировании div с переменным размером

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

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

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

Here's the demo site, где я хочу применить этот макет.

Большое спасибо!

источник

2011-11-29 Abhranil Das

Он работает так, как вы хотите, в Safari, если я правильно понял. – jQuerybeast

Он горизонтально центрирован, но если вы измените размер окна Safari вертикально, вы увидите, что div не перемещается, чтобы оставаться в центре. –

Тогда вы можете рассмотреть возможность взглянуть на это: http://jsfiddle.net/C958g/, но я бы не предложил его. Есть ли какая-то конкретная причина, почему вы не присваиваете ее абсолютной позиции? Вы можете добиться того же самого и многое другое, изменив несколько вещей в своем CSS – jQuerybeast

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

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

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

источник

2011-11-29 12:39:27 ptriek

Эй, мне, наконец, пришлось использовать таблицы-клетки, но это работало только тогда, когда я включил некоторые из ваших идей. Благодаря! –

В вертикальном и горизонтальном центрировании div с переменным размером

ответ

Смежные вопросы