CSS => Centraggio

Usando la trasformazione CSS

Le trasformazioni CSS sono basate sulla dimensione degli elementi, quindi se non sai quanto è alto o largo il tuo elemento, puoi posizionarlo assolutamente al 50% dalla parte superiore e a sinistra di un contenitore relativo e tradurlo del 50% a sinistra e verso l'alto per centrarlo verticalmente e orizzontalmente.

Tieni presente che con questa tecnica, l'elemento potrebbe terminare con il rendering a un limite di pixel non intero, rendendolo sfocato. Vedere questa risposta in SO per una soluzione alternativa.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Visualizza l'esempio in JSFiddle

COMPATIBILITÀ DEL BROWSER CROSS

La proprietà di trasformazione ha bisogno dei prefissi per essere supportati dai browser più vecchi. I prefissi sono necessari per Chrome <= 35, Safari <= 8, Opera <= 22, Browser Android <= 4.4.4 e IE9. Le trasformazioni CSS non sono supportate da IE8 e versioni precedenti.

Ecco una dichiarazione di trasformazione comune per l'esempio precedente:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

Per maggiori informazioni vedi canIuse .

MAGGIORI INFORMAZIONI

L'elemento viene posizionato in base al primo genitore non statico ( position: relative , absolute o fixed ). Esplora di più in questo violino e questo argomento di documentazione .

Per il centraggio solo orizzontale, usa left: 50% e transform: translateX(-50%) . Lo stesso vale per il centraggio solo verticale: centro con top: 50% e transform: translateY(-50%) .

L'uso di elementi di larghezza / altezza non statici con questo metodo di centraggio può far sì che l'elemento centrato appaia schiacciato. Questo accade principalmente con elementi contenenti testo e può essere corretto aggiungendo: margin-right: -50%; e margin-bottom: -50%; . Guarda questo violino per maggiori informazioni.

Utilizzando Flexbox

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

Visualizza risultato

HTML:

<img src="http://lorempixel.com/400/200" />

CSS:

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Visualizza risultato

Vedi Dynamic Vertical e Horizontal Centering nella documentazione di Flexbox per maggiori dettagli su flexbox e cosa significano gli stili.

Supporto del browser

Flexbox è supportato da tutti i principali browser, tranne le versioni di IE prima di 10 .

Alcune versioni recenti del browser, come Safari 8 e IE10, richiedono i prefissi del fornitore .

Per un modo rapido per generare prefissi c'è Autoprefixer , uno strumento di terze parti.

Per i browser più vecchi (come IE 8 e 9) è disponibile un Polyfill .

Per uno sguardo più dettagliato al supporto del browser Flexbox, vedere questa risposta .

Usando la posizione: assoluta

Lavorare con i vecchi browser (IE> = 8)

I margini automatici, accoppiati con valori pari a zero per gli offset left e right o top e bottom , centrano gli elementi posizionati in modo assoluto all'interno del relativo elemento principale.

Visualizza risultato

HTML

<div class="parent">
  <img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
  position: relative;
  height: 500px;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Gli elementi che non hanno la loro larghezza e altezza implicite come fanno le immagini, avranno bisogno di quei valori definiti.

Altre risorse: centratura assoluta nei CSS

Tecnica dell'elemento fantasma (hack di Michał Czernow)

Questa tecnica funziona anche quando le dimensioni del contenitore sono sconosciute.

Imposta un elemento "fantasma" all'interno del contenitore che deve essere centrato con altezza al 100%, quindi usa vertical-align: middle su entrambi e l'elemento da centrare.

CSS

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  white-space: normal; /* Resetting inherited nowrap behavior */
}

HTML

<div class="block">
  <div class="centered"></div>
</div>

Utilizzando testo allineato

Il tipo di centratura più comune e più semplice è quello delle righe di testo in un elemento. Il CSS ha la regola text-align: center per questo scopo:

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

Questo non funziona per il centraggio di interi elementi di blocco . allineamento del text-align controlla solo l'allineamento del contenuto in linea come il testo nel suo elemento blocco genitore.

Ulteriori informazioni text-align nella sezione Tipografia .

Centraggio in relazione ad un altro oggetto

Vedremo come centrare il contenuto in base all'altezza di un elemento vicino.

Compatibilità: IE8 +, tutti gli altri browser moderni.

HTML

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

CSS

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

Collegamento a JSFiddle

I punti principali sono i .thumb 3 .thumb , .details e .position-container container:

Il .position-container deve avere display: table .
I .details devono avere la larghezza di larghezza reale width: .... e display: table-cell , vertical-align: middle .
Il .thumb deve avere width: 100% se vuoi che .thumb tutto lo spazio rimanente e sarà influenzato dalla larghezza .details .
L'immagine (se hai un'immagine) all'interno .thumb dovrebbe avere width: 100% , ma non è necessario se hai le proporzioni corrette.

Allineare verticalmente qualsiasi cosa con 3 linee di codice

Supportato da IE11 +

Visualizza risultato

Usa queste 3 linee per allineare verticalmente praticamente tutto. Assicurati che l'immagine / div che applichi il codice abbia un genitore con un'altezza.

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

Allinea verticalmente un'immagine all'interno div

HTML

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

Centratura orizzontale e verticale usando la disposizione della tabella

Si potrebbe facilmente centrare un elemento figlio usando la proprietà di visualizzazione table .

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

Utilizzo di calc ()

La funzione calc () è la parte di una nuova sintassi in CSS3 in cui puoi calcolare (matematicamente) quale dimensione / posizione occupa il tuo elemento usando una varietà di valori come pixel, percentuali, ecc. Nota: - Ogni volta che usi questa funzione , calc(100% - 80px) sempre attenzione allo spazio tra due valori calc(100% - 80px) .

CSS

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

Allinea verticalmente gli elementi di altezza dinamica

L'applicazione intuitiva di css non produce i risultati desiderati perché

vertical-align:middle non è applicabile agli elementi a livello di blocco
margin-top:auto e margin-bottom:auto valori margin-bottom:auto utilizzati dovrebbero essere calcolati come zero
margin-top:-50% valori di margine basati sulla percentuale vengono calcolati in relazione alla larghezza del blocco contenitore

Per il supporto del browser più ampio, una soluzione alternativa con gli elementi helper:

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

jsfiddle dalla domanda originale . Questo approccio

funziona con elementi di altezza dinamici
rispetta il flusso di contenuti
è supportato dai browser legacy

Utilizzando l'altezza della linea

Puoi anche usare l' line-height per centrare verticalmente una singola riga di testo all'interno di un contenitore:

CSS

div {
    height: 200px;
    line-height: 200px;
}

È piuttosto brutto, ma può essere utile all'interno di un elemento <input /> . La proprietà line-height funziona solo quando il testo da centrare si estende su una singola riga. Se il testo viene disposto su più righe, l'output risultante non sarà centrato.

Centratura verticale e orizzontale senza preoccuparsi di altezza o larghezza

La seguente tecnica ti consente di aggiungere il tuo contenuto a un elemento HTML e centrarlo sia orizzontalmente che verticalmente senza preoccuparti della sua altezza o larghezza .

Il contenitore esterno

dovrebbe avere display: table;

Il contenitore interno

dovrebbe avere display: table-cell;
dovrebbe avere vertical-align: middle;
dovrebbe avere text-align: center;

La scatola dei contenuti

dovrebbe avere display: inline-block;
dovrebbe riaggiustare l'allineamento orizzontale del testo ad es. text-align: left; o text-align: right; , a meno che tu non voglia che il testo sia centrato

dimostrazione

HTML

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

CSS

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

Vedi anche questo Fiddle !

Centratura con dimensioni fisse

Se la dimensione dei tuoi contenuti è fissa, puoi utilizzare il posizionamento assoluto al 50% con margin che riduce la metà della larghezza e dell'altezza del tuo contenuto:

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

Centratura orizzontale con larghezza fissa

Puoi centrare l'elemento orizzontalmente anche se non conosci l'altezza del contenuto:

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

Centratura verticale con altezza fissa

Puoi centrare l'elemento verticalmente se conosci l'altezza dell'elemento:

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

Utilizzo del margine: 0 auto;

Gli oggetti possono essere centrati usando il margin: 0 auto; se sono elementi di blocco e hanno una larghezza definita.

HTML

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

#centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Risultato:

Esempio JSFiddle: Centrare gli oggetti con margine: 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

CSS
Centraggio

Ricerca…

Usando la trasformazione CSS

COMPATIBILITÀ DEL BROWSER CROSS

MAGGIORI INFORMAZIONI

Utilizzando Flexbox

Usando la posizione: assoluta

Tecnica dell'elemento fantasma (hack di Michał Czernow)

Utilizzando testo allineato

Centraggio in relazione ad un altro oggetto

Allineare verticalmente qualsiasi cosa con 3 linee di codice

Allinea verticalmente un'immagine all'interno div

Centratura orizzontale e verticale usando la disposizione della tabella

Utilizzo di calc ()

Allinea verticalmente gli elementi di altezza dinamica

Utilizzando l'altezza della linea

Centratura verticale e orizzontale senza preoccuparsi di altezza o larghezza

Il contenitore esterno

Il contenitore interno

La scatola dei contenuti

dimostrazione

Centratura con dimensioni fisse

Centratura orizzontale con larghezza fissa

Centratura verticale con altezza fissa

Utilizzo del margine: 0 auto;