Centrage vertical/horizontal facile

See the Pen ZYwKrd by alexishehehe (@stolalex) on CodePen.

Le conteneur de l’élément affiché doit avoir un layout forcé via la propriété position: relative, position: absolute ou position: fixed.

L’élément à centrer doit être mis en display: absolute pour être librement positionné.

Les propriétés top: 50% et left: 50% positionnent le bouton à 50% des hauteurs et largeurs totale du conteneur.

Les propriétés transform: translateY(-50%) et transform: translateX(-50%) déplace l’élément à -50% de ses propres hauteurs et largeurs.

```css .container{ height: 300px; position: relative; }

.vertical-centered{ position: absolute; top: 50%; transform: translateY(-50%); }

.horizontal-centered{ position: absolute; left: 50%; transform: translateX(-50%); } ```

Ratios

box-sizing

checkbox trick