Вообще говоря, удобнее центрировать DIV по вертикали и горизонтали с заданной высотой, но немного хлопотнее, если высота не определена, я попробовал и добился абсолютного центрирования через два вспомогательных DIV, что совместимо со стандартом. браузеры, такие как IE и FF.
Код CSS:
#wrapper{высота:100%;ширина:100%;переполнение:скрытый;позиция:относительная}
#wrapper[id]{display:table;}
#mid{позиция: абсолютная;сверху:50%;слева:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{position:relative;top:-50%;left:-50%;z-index:9999;width:300px}
#box[id]{left:0;margin:0 auto;}
div.boxstyle{border:2px Solid #000;text-align:center;padding:5px;}
Код XHTML:
<div id="wrapper">
<div id="mid">
<div id="box" class="boxstyle">
<p>http://bolm.cn</p>
<p>Пример абсолютного центра DIV</p>
</div>
</div>
</div>
Если коротко, оболочка — это внешний слой, Mid — средний слой, а Box — абсолютно центрированный слой.
В стандартных браузерах, таких как FF, вы можете установить режим представления слоя-обертки на таблицу, а среднего слоя на режим отображения ячеек таблицы, чтобы вы могли использовать вертикальное выравнивание: средний для достижения абсолютного вертикального центрирования среднего слоя. в то время как в IE для достижения вертикального центрирования используются метод top:50% и относительное позиционирование -50%, установленное последующим полем. Методы горизонтального центрирования также различаются. FF может просто установить отступ для достижения этой цели, в то время как IE также устанавливает лево, чтобы компенсировать друг друга.
Кроме того, такие выражения, как #box[id] распознаются только стандартными браузерами, такими как FF, поэтому здесь вы можете установить стили, принадлежащие таким браузерам, как FF.
Поскольку высота поля не установлена, по умолчанию используется значение auto с переменной высотой, то же самое относится и к переменной ширине.