D'une manière générale, il est plus pratique de centrer le DIV verticalement et horizontalement avec une hauteur spécifiée, mais c'est un peu plus gênant si la hauteur n'est pas déterminée. Je l'ai essayé et j'ai obtenu un centrage absolu grâce à deux DIV auxiliaires, ce qui est compatible avec le standard. navigateurs tels que IE et FF.
Code CSS :
#wrapper{hauteur : 100 % ; largeur : 100 % ; débordement : caché ; position : relative}
#wrapper[id]{display:table;}
#mid{position : absolue;haut:50%;gauche:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{position:relative;top:-50%;gauche:-50%;z-index:9999;width:300px}
#box[id]{left:0;margin:0 auto;}
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;}
Code XHTML :
http://bolm.cn
Exemple de centre absolu DIV
Pour expliquer brièvement, le wrapper est la couche externe, le mid est la couche intermédiaire et la box est la couche absolument centrée.
Dans les navigateurs standards tels que FF, vous pouvez définir le mode de présentation de la couche wrapper sur tableau et la couche intermédiaire sur le mode d'affichage de cellule de tableau, de sorte que vous puissiez utiliser vertical-align:middle pour obtenir un centrage vertical absolu de la couche intermédiaire, tandis que dans IE La méthode top:50% et le positionnement relatif de -50% défini par la case suivante sont utilisés pour obtenir un centrage vertical. Les méthodes de centrage horizontal sont également différentes. FF peut simplement définir la marge pour y parvenir, tandis que IE définit également la gauche pour se décaler.
De plus, les expressions telles que #box[id] ne sont reconnues que par les navigateurs standards tels que FF, vous pouvez donc définir ici des styles qui appartiennent à des navigateurs tels que FF.
Puisque la hauteur de la boîte n'est pas définie, la valeur par défaut est auto avec une hauteur variable, et il en va de même pour une largeur variable.