Très bien, donc c'est fondamentalement la question habituelle "comment centrer verticalement avec CSS", mais avec quelques captures.Centrage vertical, hauteur inconnue, autre contenu sur la page
Pas de Javascript. HTML et CSS seulement. CSS3 est correct tant qu'il est raisonnablement bien supporté par les navigateurs d'aujourd'hui.
Le contenu de l'élément, et donc sa hauteur, n'est pas connu. Cela peut aller de quelques dizaines à quelques centaines de pixels. À l'avenir, je pourrais même avoir un script ajoutant et supprimant des éléments à l'intérieur, de sorte qu'il peut changer de hauteur lorsque l'utilisateur interagit avec lui.
Il y a un autre contenu sur la page - une barre de navigation à gauche et un menu en haut. Ceux-ci doivent être accessibles.
L'approche que je l'ai utilisé est la méthode des trois conteneurs div en utilisant l'affichage: table-cell, comme indiqué à: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html cela résout les problèmes 1 et 2, mais pas 3.
http://imgh.us/vcenter.jpg montre le design et le problème. La boîte jaune est le conteneur le plus à l'intérieur. Les boîtes pointillées rouges et vertes autour de la page entière (qui sont devenues quelque peu floues en raison de l'encodage JPEG) sont respectivement les conteneurs les plus à l'extérieur et au milieu. (Le pied de page déplacé est une question distincte ...)
Le problème avec cette mise en page est que les conteneurs externes couvrent toute la page, ce qui rend impossible de cliquer sur la barre de navigation, car elle est maintenant "sous "ces conteneurs. Z-index peut les déplacer vers le bas, mais il devient alors impossible de cliquer sur quoi que ce soit à l'intérieur de la boîte rouge, car il est maintenant "sous" la boîte de contenu principale de la page. (XHTML ne permet qu'un seul élément dans le corps < >, donc je l'ai juste enveloppé dans un <div>.) Même si les deux conteneurs externes ont un index z: -100 et le conteneur interne a z-index: 200, il finit toujours sous la boîte de contenu principal pour une raison quelconque. (J'ai essayé différents attributs de position.) La seule solution que j'ai vue est une nouvelle propriété CSS3, pointer-events, qui me permettrait en théorie de faire passer les événements à travers les conteneurs transparents comme je m'y attendais; Cependant, cela semble assez récent et pas encore supporté par la plupart des navigateurs en dehors de SVG, et j'imagine que j'aurais les mêmes problèmes qu'avec Z-index. Je souhaite que l'élément se trouve au centre de la page et non au centre de la zone de contenu (ignorant les barres de navigation dans le calcul de la position). Le placement du conteneur dans la zone de contenu n'est donc pas une solution idéale. (J'utilise aussi ce style sur la page de connexion, qui n'a pas de navbars, et il semblerait étrange que les éléments centrés soient centrés par rapport à une barre de navigation qui n'est pas toujours visible.)
En résumé, ce dont j'ai besoin est de centrer, sans utiliser Javascript, un élément de hauteur inconnue sur une page avec d'autres contenus sur ses bords, sans couvrir le contenu avec un calque invisible (et donc le rendre non cliquable).
Ces « prises » sont presque identiques au dilemme d'habitude. – Ben