Positionner le centre d'un élément

Comment gérer la création de l'écran d'une application web lorsque ces différents composants doivent être positionner par rapport à leur centre.

Présentation

Le positionnement d'un élément HTML lorsqu'il est sorti du flux se fait par défaut à partir du point en haut (top) à gauche (left) de la boîte dessinée par le dit élément ; On peut éventuellement décider de le positionner à partir de son bord bas (bottom) et/ou droit (right). D'autres systèmes d'interfaces graphiques demandent ou utilisent un mode de positionnement différent, comme la notion de « layout » par exemple.

J'ai eu à porter dans des applications web un de ces systèmes « altérnatifs »(1), qui permet de positionner un élément de manière proportionnelle avec son centre comme point d'ancrage.

Image

Changement d'ancrage du positionnement d'un élément HTML.

Code

Le code ci-dessous est une version simplifiée de la solution mise en place, qui doit par ailleurs gérer l'élasticité des éléments.

/**
 *  Méthodes pour positionner le centre d'un élément HTML
 */
var posCenter = {
    /**
     *  Positionner le centre d'un élément sur l'axe horizontal.
     *
     *  @param {HTMLElement} element à positionner.
     *  @param {int} pos La position en pourcent par rapport au bord gauche du parent.
     */
     x: function (element, pos) {
        element.style.left = pos + '%';
        element.style.marginLeft = '-' + (element.offsetWidth/2) + 'px';
    },
    /**
     *  Positionner le centre d'un élément sur l'axe vertical.
     *
     *  @param {HTMLElement} element à postionner.
     *  @param {int} pos La position en pourcent par rapport au bord haut du parent.
     */
    y: function (element, pos) {
        element.style.top = pos + '%';
        element.style.marginTop = '-' + (element.offsetHeight/2) + 'px';
    }
};
Positonner un élément en ancrant son centre.

Démonstration

Ressources et références

NIBAU, Rui. Position absolue et centrages d'un élement HTML. Omacronides,

NIBAU, Rui. Position absolue et taille des éléments HTML. Omacronides,

BOS, Bert ; ÇELIK, Tantek ; HICKSON, Ian, et al.. CSS 2.1 Specification. W3C, . 9.3 Positioning schemes

EICHOLZ, Arron. CSS Positioned Layout Module Level 3. W3C,