Centrage horizontal et vertical absolu en CSS

Cet article a été mis à jour le 31 janvier 2019 pour mettre à jour les informations fournies ci-dessous. L’ancienne information n’est pas fausse, cependant est la nouvelle version moins bidouillée et fait usage de Flexbox, l’un des nouveaux standards des mises en page web modernes.

.Absolute-Center { display: flex; // make us of Flexbox align-items: center; // does vertically center the desired content justify-content: center; // horizontally centers single line items text-align: center; // optional, but helps horizontally center text that breaks into multiple lines} 

Voici l’article original d’août 2013 :

Nous avons tous vu margin: 0 auto; pour le centrage horizontal, mais margin: auto; a refusé de fonctionner pour le centrage vertical… jusqu’à maintenant ! Mais en fait (alerte spoiler !) le centrage absolu ne nécessite qu’une hauteur déclarée et ces styles :

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

Je ne suis pas le pionnier de cette méthode (pourtant j’ai osé la nommer Absolute Centering), et il se peut même que ce soit une technique courante, cependant, la plupart des articles sur le centrage vertical ne la mentionnent jamais et je ne l’avais jamais vue jusqu’à ce que je fouille dans la section des commentaires d’un article particulier.

Là, Simon a fait un lien vers ce jsFiddle qui a soufflé toutes les autres méthodes hors de l’eau (la même méthode a également été mentionnée par Priit dans les commentaires). En poussant la recherche plus loin, j’ai dû utiliser des mots-clés très spécifiques pour trouver quelques autres sources pour cette méthode.

N’ayant jamais utilisé cette technique auparavant, je l’ai mise à l’épreuve et j’ai découvert à quel point Absolute Centering est vraiment incroyable.

Trouver des démos supplémentaires, un tableau comparatif et plus encore sur CodePen.

Avantages

• Cross-browser (y compris IE8-10)
• Pas de balisage spécial, styles minimaux
• Responsable avec les pourcentages et min-/max-
• Utiliser une seule classe pour centrer tout contenu
• Centré indépendamment du padding (sans box-sizing !)
• Les blocs peuvent facilement être redimensionnés
• Fonctionne très bien sur les images

Caveurs

• La hauteur doit être déclarée (voir Hauteur variable)

.

• Il est recommandé de définir overflow: auto pour éviter le débordement du contenu (voir Overflow)
• Ne fonctionne pas sur Windows Phone

Compatibilité des navigateurs :

Chrome, Firefox, Safari, Safari mobile, IE8-10.Absolute Centering a été testé et fonctionne parfaitement dans les dernières versions de Chrome, Firefox, Safari, Mobile Safari, et même IE8-10.

Explication

Après avoir recherché les spécifications et la documentation, voici ce que je comprends du fonctionnement d’Absolute Centering :

• Dans le flux de contenu normal, margin: auto; est égal à ‘0’ pour le haut et le bas.W3.org : Si ‘margin-top’, ou ‘margin-bottom’ sont ‘auto’, leur valeur utilisée est 0.
• position: absolute; fait sortir le bloc du flux de contenu typique, rendant le reste du contenu comme si ce bloc n’était pas là.Developer.mozilla.org : …un élément positionné de manière absolue est sorti du flux et ne prend donc pas de place
• Mettre top: 0; left: 0; bottom: 0; right: 0; donne au navigateur une nouvelle boîte de délimitation pour le bloc. À ce stade, le bloc remplira tout l’espace disponible dans son parent décalé, qui est le corps ou le conteneur position: relative;. Developer.mozilla.org : Pour les éléments positionnés de manière absolue, les propriétés top, right, bottom et left spécifient les décalages par rapport au bord du bloc contenant l’élément (ce par rapport à quoi l’élément est positionné).
• Donner au bloc un width ou un height empêche le bloc d’occuper tout l’espace disponible et oblige le navigateur à calculer margin: auto en fonction de la nouvelle boîte englobante. Développeur.mozilla.org : La marge de l’élément est alors positionnée à l’intérieur de ces décalages.
• Puisque le bloc est positionné de manière absolue et donc hors du flux normal, le navigateur donne des valeurs égales à margin-top et margin-bottom centrant l’élément dans les limites fixées précédemment.W3.org : Si aucun des trois n’est  » auto  » : Si  » margin-top  » et  » margin-bottom  » sont tous deux  » auto « , résolvez l’équation sous la contrainte supplémentaire que les deux marges obtiennent des valeurs égales. AKA : centrez le bloc verticalement

Le centrage absolu semble être l’utilisation prévue pour margin: auto; sur la base de la spécification et devrait donc fonctionner dans chaque navigateur conforme aux normes.

TL;DR : Les éléments positionnés de manière absolue ne sont pas rendus dans le flux normal, donc margin: auto; se centre verticalement dans les limites fixées par top: 0; left: 0; bottom: 0; right: 0;.

Dans un conteneur

.Center-Container { position: relative;}.Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}

Avec le centrage absolu, vous pouvez placer votre bloc de contenu à l’intérieur d’un conteneur position: relative pour aligner le bloc dans le conteneur !

Le reste des démos supposera que ces styles sont déjà inclus et fournira des classes complémentaires pour mettre en œuvre diverses fonctionnalités.

Centre absolu, à l’intérieur du conteneur

Cette boîte est absolument centrée, horizontalement et verticalement, à l’intérieur de son conteneur en utilisantposition: relative.

Within Viewport

.Absolute-Center.is-Fixed { position: fixed; z-index: 999;}

Vous voulez que le bloc de contenu soit centré dans le viewport ? Définissez-le sur position: fixed et donnez-lui un z-index élevé, comme la modale sur cette page.

• Mobile Safari : Le bloc de contenu sera centré verticalement dans l’ensemble du document, et non dans le viewport, s’il ne se trouve pas dans un position: relative conteneur.

Offsets

.Absolute-Center.is-Right { left: auto; right: 20px; text-align: right;}.Absolute-Center.is-Left { right: auto; left: 20px; text-align: left;}

Si vous avez un en-tête fixe ou si vous devez ajouter d’autres offsets, il suffit de l’ajouter dans les styles de votre bloc de contenu comme top: 70px;. Tant que margin: auto; est déclaré, le bloc de contenu sera centré verticalement dans les limites que vous déclarez avec topleftbottom et right.

Vous pouvez également coller votre bloc de contenu à droite ou à gauche tout en le gardant centré verticalement, en utilisant right: 0; left: auto; pour coller à droite ou left: 0; right: auto; pour coller à gauche.

Centre vertical, alignement à droite

Cette boîte est absolument centrée verticalement dans son conteneur, mais collée à droite avecright: 0; left: auto;.

Responsable

.Absolute-Center.is-Responsive { width: 60%; height: 60%; min-width: 200px; max-width: 400px; padding: 40px;}

Peut-être que le meilleur avantage du centrage absolu est que la largeur/hauteur basée sur le pourcentage fonctionne parfaitement ! Même les styles min-width/max-width et min-height/max-height se comportent comme prévu pour les boîtes plus réactives.

Allez-y, ajoutez du padding à l’élément ; Absolute Centering ne s’en soucie pas !

Centre absolu, basé sur les pourcentages

Cette boîte est absolument centrée, horizontalement et verticalement, même avec des largeurs basées sur les pourcentages & hauteur, min-/max-, et padding !

Débordement

.Absolute-Center.is-Overflow { overflow: auto;}

Le contenu plus haut que le bloc ou le conteneur (viewport ou un position: relative conteneur) débordera et pourra déborder en dehors du bloc de contenu et du conteneur, voire être coupé. Le simple ajout de overflow: auto permettra au contenu de défiler à l’intérieur du bloc tant que le bloc de contenu lui-même n’est pas plus haut que son conteneur (peut-être en ajoutant max-height: 100%; si vous n’avez pas de padding sur le bloc de contenu lui-même).

Redimensionnement

.Absolute-Center.is-Resizable { min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both; overflow: auto;}

Vous pouvez redimensionner votre bloc de contenu avec d’autres classes ou du Javascript sans avoir à recalculer le centre manuellement ! L’ajout de la propriété resize permettra même à votre bloc de contenu d’être redimensionné par l’utilisateur.

Le centrage absolu conserve le bloc centré, quelle que soit la façon dont il est redimensionné. La définition de min-/max- limitera la taille du bloc à ce que vous voulez et l’empêchera de déborder de la fenêtre/conteneur.

Si vous n’utilisez pas resize: both, vous pouvez ajouter une transition pour animer en douceur entre les tailles. Veillez à définir overflow: auto car le bloc pourrait être redimensionné plus petit que le contenu.

Le centrage absolu est la seule technique de centrage vertical testée qui prend en charge avec succès la propriété resize: both.

Caveats

• Réglez votre max-width/max-height pour compenser tout rembourrage sur le bloc de contenu lui-même, sinon il débordera de son conteneur.
• La propriété resize n’est pas prise en charge sur les navigateurs mobiles ou dans IE 8-10 ; assurez-vous donc que vos utilisateurs disposent d’un autre moyen de redimensionnement si cela est essentiel à l’expérience utilisateur.
• La combinaison des propriétés resize et transition entraîne un délai égal au temps de transition lorsque l’utilisateur tente de redimensionner.

Images

HTML:

<img src="http://placekitten.com/g/500/200" class="Absolute-Center is-Image" alt="" />

CSS:

.Absolute-Center.is-Image { height: auto;}.Absolute-Center.is-Image img { width: 100%; height: auto;}

Les images fonctionnent aussi ! Appliquez la classe/style à l’image elle-même et définissez height: auto; comme vous le feriez avec une image de taille réactive pour la laisser se redimensionner avec le conteneur.

Notez que height: auto; fonctionne pour les images, mais provoque l’étirement d’un bloc de contenu ordinaire pour remplir le conteneur, à moins que vous n’utilisiez la technique de hauteur variable. C’est probablement parce que les navigateurs doivent calculer la hauteur pour l’image rendue, donc margin: auto; finit par fonctionner comme si vous aviez déclaré la hauteur dans tous les navigateurs testés.

Hauteur variable

Javascript:

/* Modernizr Test for Variable Height Content */Modernizr.testStyles('#modernizr { display: table; height: 50px; width: 50px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) { Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);});

CSS :

.absolutecentercontent .Absolute-Center.is-Variable { display: table; height: auto;}

Le centrage absolu nécessite une hauteur déclarée, cependant la hauteur peut être basée sur un pourcentage et contrôlée par max-height. Cela le rend idéal pour les scénarios responsive, assurez-vous simplement de définir un débordement approprié.

Une façon de contourner la hauteur déclarée est d’ajouter display: table, centrant le bloc de contenu indépendamment de la longueur du contenu. Cela pose des problèmes dans quelques navigateurs (IE et Firefox, principalement), donc mon pote Kalley chez ELL Creative a écrit un test Modernizr pour vérifier si le navigateur supporte cette méthode de centrage. Maintenant, vous pouvez améliorer progressivement

Caveats

Cela rompra la compatibilité entre navigateurs. Vous pouvez envisager une autre technique si le test Modernizr ne répond pas à vos besoins.

• Non compatible avec la technique de redimensionnement.
• Fox/IE8 : L’utilisation de display: table aligne le bloc de contenu vers le haut, mais est toujours centré horizontalement.
• Ie9/10 : L’utilisation de display: table aligne le bloc de contenu en haut à gauche.
• Mobile Safari : Le bloc de contenu est centré verticalement, mais devient légèrement décentré horizontalement lors de l’utilisation de largeurs basées sur le pourcentage.

Centre absolu, hauteur variable

Cette boîte est absolument centrée verticalement dans son conteneur, quelle que soit la hauteur du contenu.

Autres techniques

Le centrage absolu est une excellente solution pour le centrage, mais il existe d’autres méthodes qui peuvent répondre à des besoins plus spécifiques. Les méthodes les plus couramment utilisées ou recommandées sont les marges négatives, les transformations, le Tableau-Cellule, le Bloc-Inline et maintenant Flexbox. Elles sont abordées plus en profondeur dans d’autres articles, je ne couvrirai donc que les bases ici.

Marge négative

.is-Negative { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */}

Peut-être la technique la plus courante. Si les dimensions exactes sont connues, le fait de définir une marge négative égale à la moitié de la largeur/hauteur (plus le padding, si l’on n’utilise pas box-sizing: border-box) ainsi que top: 50%; left: 50%; permettra de centrer le bloc dans un conteneur.

Il convient de noter que c’est la seule méthode testée qui fonctionne comme prévu dans IE6-7.

Avantages

• Fonctionne bien sur tous les navigateurs, y compris IE6-7
• Requiert un code minimal

Avantages

• Non réactif. Ne fonctionne pas pour les dimensions basées sur les pourcentages et ne peut pas définir min-/max-
• Le contenu peut déborder du conteneur
• Vous devez compenser pour padding ou utiliser box-sizing: border-box

Centre absolu, Marges négatives

Cette boîte est absolument centrée verticalement dans son conteneur en utilisant des marges négatives.

Transformations

.is-Transformed { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

L’une des techniques les plus simples présentant à peu près les mêmes avantages que le centrage absolu, mais prenant en charge une hauteur variable. Donnez au bloc de contenu transform: translate(-50%,-50%) avec les préfixes de fournisseur requis ainsi que top: 50%; left: 50%; pour qu’il soit centré.

Avantages

• Contenu de hauteur variable
• Requiert un code minimal

Avantages

• Ne fonctionnera pas dans IE8
• Nécessite des préfixes de vendeur. préfixes
• Peut interférer avec d’autres transform effets
• Résulte en un rendu flou des bords et du texte dans certains cas

Centre absolu, Translate(-50%,-50%)

Cette boîte est absolument centrée verticalement dans son conteneur en utilisant translate(-50%,-50%).

Table-Cell

HTML:

<div class="Center-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> <!-- CONTENT --> </div> </div></div>

CSS:

.Center-Container.is-Table { display: table; }.is-Table .Table-Cell { display: table-cell; vertical-align: middle;}.is-Table .Center-Block { width: 50%; margin: 0 auto;}

Cette technique est peut-être la meilleure dans l’ensemble, tout simplement parce que la hauteur peut varier en fonction du contenu et que le support des navigateurs est excellent. Le principal inconvénient est le balisage supplémentaire, nécessitant un total de trois éléments pour que le dernier soit centré.

Avantages

• Contenu de hauteur variable
• Le contenu déborde en étirant l’élément parent
• Fonctionne bien en cross-browser

Avantages

• Requiert un balisage supplémentaire

Centre absolu, Tableau/Tableau-Cellule

Cette boîte est absolument centrée verticalement dans son display: table-cell parent, qui se trouve dans un display: table conteneur.

Bloc en ligne

HTML:

<div class="Center-Container is-Inline"> <div class="Center-Block"> <!-- CONTENT --> </div></div>

CSS:

.Center-Container.is-Inline { text-align: center; overflow: auto;}.Center-Container.is-Inline:after,.is-Inline .Center-Block { display: inline-block; vertical-align: middle;}.Center-Container.is-Inline:after { content: ’; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */}.is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for IE9+ */}

À la demande générale : Le centrage des blocs en ligne. L’idée de base est d’utiliser display: inline-blockvertical-align: middle et un élément psuedo pour centrer votre bloc de contenu à l’intérieur d’un conteneur. Mon implémentation a quelques nouvelles astuces ici que je n’ai pas vues ailleurs et qui aident à résoudre quelques problèmes.

La largeur du bloc de contenu doit être déclarée comme n’étant pas plus large que 100% du conteneur moins 0,25em si le contenu est plus large que le conteneur. comme un bloc avec un long texte de paragraphe. Sinon, le bloc de contenu sera poussé vers le haut, ce qui est la raison d’utiliser :after. L’utilisation de :before a fait que le contenu a été poussé vers le bas à 100 % !

Si votre bloc de contenu doit occuper le plus d’espace horizontal disponible possible, vous pouvez ajouter soit max-width: 99%;, qui fonctionne pour les conteneurs plus grands, soit max-width: calc(100% - 0.25em) en fonction des navigateurs que vous prenez en charge et de la largeur du conteneur.

Les avantages sont essentiellement les mêmes que ceux de la technique Table-Cell, mais j’ai initialement laissé cette méthode de côté parce qu’il s’agit en grande partie d’un hack. Quoi qu’il en soit, le support des navigateurs est excellent et cette technique s’avère être populaire.

Avantages

• Contenu de hauteur variable
• Le contenu déborde en étirant l’élément parent
• Fonctionne bien en cross-browser, et peut être adapté pour le support d’IE7 (visualisez le CSS pour voir)

Caveats

• Requiert un conteneur
• Relie à margin-left: -0.25em; pour se centrer horizontalement correctement, mais peut avoir besoin d’être ajusté pour différentes polices/tailles
• La largeur du bloc de contenu doit être déclarée pour ne pas être plus large que 100% du conteneur moins 0.25em.

Centre absolu, bloc en ligne

Cette boîte est absolument centrée verticalement en utilisant display: inline-blockvertical-align: middle et un élément psuedo.

Flexbox

.Center-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}

Le futur de la mise en page en CSS, Flexbox est la dernière spécification CSS conçue pour résoudre les problèmes de mise en page courants tels que le centrage vertical. Smashing Magazine a déjà un excellent article sur le centrage des éléments avec Flexbox que vous devriez lire pour un aperçu plus complet. Gardez à l’esprit que Flexbox est plus qu’un moyen de centrer, il peut être utilisé pour les colonnes et toutes sortes de problèmes de mise en page fous.

Avantages

• Le contenu peut être de n’importe quelle largeur ou hauteur, même déborder gracieusement
• Peut être utilisé pour des techniques de mise en page plus avancées.

Caveurs

• Pas de support IE8-9
• Requiert un conteneur ou des styles sur le corps

Centre absolu, Flexbox

Cette boîte Flexbox est absolument centrée verticalement dans son conteneur.

Recommandations

Chaque technique a ses avantages. Celle que vous choisissez se résume principalement aux navigateurs que vous prenez en charge et à ce à quoi ressemble votre balisage existant, mais utilisez le tableau comparatif pour faire le bon choix en fonction des fonctionnalités dont vous avez besoin.

Le centrage absolu fonctionne très bien en tant que solution de dépôt simple et sans chichi. Partout où vous utilisiez des marges négatives auparavant, utilisez le Centrage absolu à la place. Vous n’aurez pas à vous occuper de mathématiques embêtantes pour les marges ou de balisage supplémentaire, et vous pourrez dimensionner vos boîtes de manière réactive.

Si votre site nécessite un contenu de hauteur variable avec la meilleure compatibilité avec les navigateurs, essayez les techniques Table-Cell, Inline-Block. Si vous êtes à la pointe du progrès, essayez Flexbox et profitez des avantages de ses techniques de mise en page avancées.

Lectures complémentaires sur SmashingMag :

• Le guide définitif de l’utilisation des marges négatives
• Flexbox est aussi facile que la tarte – Conception de mises en page CSS
• Le mystère de la propriété CSS Float

(vf)

.