Im Allgemeinen ist es bequemer, das DIV vertikal und horizontal mit einer bestimmten Höhe zu zentrieren, aber es ist etwas problematischer, wenn die Höhe nicht bestimmt wird. Ich habe es versucht und eine absolute Zentrierung durch zwei Hilfs-DIVs erreicht, was mit dem Standard kompatibel ist Browser wie IE und FF.
CSS-Code:
#wrapper{height:100%;width:100%;overflow:hidden;position:relative}
#wrapper[id]{display:table;}
#mid{position: absolute;top:50%;left: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-Code:
<div id="wrapper">
<div id="mid">
<div id="box" class="boxstyle">
<p>http://bolm.cn</p>
<p>DIV absolutes Zentrumsbeispiel</p>
</div>
</div>
</div>
Um es kurz zu erklären: Wrapper ist die äußere Schicht, Mid ist die mittlere Schicht und Box ist die absolut zentrierte Schicht.
In Standardbrowsern wie FF können Sie den Präsentationsmodus der Wrapper-Ebene auf Tabelle und der mittleren Ebene auf den Tabellenzellen-Anzeigemodus einstellen, sodass Sie mit Vertical-Align:Middle eine absolute vertikale Zentrierung der mittleren Ebene erreichen können. während im IE Die Methode von oben: 50 % und die relative Positionierung von -50 %, die durch das nachfolgende Feld festgelegt wird, werden verwendet, um eine vertikale Zentrierung zu erreichen. Die Methoden der horizontalen Zentrierung sind ebenfalls unterschiedlich. FF kann einfach den Rand festlegen, um dies zu erreichen, während IE auch die linke Seite so einstellt, dass sie sich gegenseitig versetzt.
Darüber hinaus werden Ausdrücke wie #box[id] nur von Standardbrowsern wie FF erkannt, sodass Sie hier Stile festlegen können, die zu Browsern wie FF gehören.
Da die Höhe des Felds nicht festgelegt ist, ist die Standardeinstellung „Auto“ mit variabler Höhe, und das Gleiche gilt für die variable Breite.