Come centrare verticalmente un div per tutti i browser?

1367

Voglio centrare divverticalmente con CSS. Non voglio tabelle o JavaScript, ma solo CSS puro. Ho trovato alcune soluzioni, ma a tutte manca il supporto di Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Come posso centrare divverticalmente tutti i principali browser, incluso Internet Explorer 6?

css  cross-browser  alignment  vertical-alignment  centering 
— Burak Erdem
fonte
25
@MarcoDemaio Le persone non guardano costantemente male tablesper i layout qui?
— Chud37,
14
@ Chud37: dipende da cosa devi fare, le tabelle per il layout non sono generalmente versatili e lunghe da digitare nel codice, con css puoi facilmente cambiare un layout a 2 cols in un layout a 3/4/5 sols ecc. Ma in questo caso è diverso, usando dozzine di consigli e trucchi CSS per un compito così semplice che potrebbe essere realizzato con una tabella cross-browser perfetta, è come tentare di entrare nella tua casa attraverso la finestra invece di usare la porta.
— Marco Demaio,
Nel caso in cui le persone non si preoccupino del supporto del browser precedente: davidwalsh.name/css-vertical-center
— Karolis Šarapnickis
1
css-vertical-center.com ci sono alcune soluzioni con informazioni sulla compatibilità del browser
— EscapeNetscape
2
— Michael Yurin

Risposte:

1374

Di seguito è riportata la migliore soluzione completa che potrei realizzare per centrare verticalmente e orizzontalmente una casella di contenuto di altezza fissa e flessibile . È stato testato e funzionante per le versioni recenti di Firefox, Opera, Chrome e Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>
Espandi frammento

Visualizza un esempio funzionante con contenuto dinamico

Ho incorporato alcuni contenuti dinamici per testare la flessibilità e mi piacerebbe sapere se qualcuno vede qualche problema con esso. Dovrebbe funzionare bene anche per overlay centrati: lightbox, pop-up, ecc.

— Billbad
fonte
Senza un DIV esterno "assoluto", qualsiasi contenuto della pagina prima spingerà l'intero blocco verso il basso. Questo lo rende più indipendente dagli altri contenuti della pagina.
— Billbad,
9
.outer {position:absolute;width:100%;height:100%}non è necessario, sono qui semplicemente per dimostrare. Tutto ciò di cui abbiamo bisogno è display:table, se qualcuno è confuso come me.
— dimora
Ho notato che questo ha bisogno del 99% per evitare le barre di scorrimento. Ancora più importante, funziona solo con i primi due div, diciamo keep .outere middlee chiaramente ignora il .innersuo stile. Non so a che cosa serve margin-left, margin-rightimpostare su auto poiché non centra l'elemento in senso orizzontale ?? !!!
— user10089632
La rimozione width: 100%;e l'aggiunta margin: 0 autoa .outerconsente anche la larghezza variabile.
— rococò
@ user10089632 No, non si tratta di larghezza o altezza ma di posizione. top: 0; left 0;manca, almeno in Chrome che imposta il valore predefinito su 1.
— Michał Woliński,
280

Un altro che non riesco a vedere nell'elenco:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • Cross-browser (incluso Internet Explorer 8 - Internet Explorer 10 senza hack!)
  • Reattivo con percentuali e min- / max-
  • Centrato indipendentemente dall'imbottitura (senza ridimensionamento della scatola!)
  • heightdeve essere dichiarato (vedi Altezza variabile )
  • Impostazione consigliata overflow: autoper impedire lo spillover del contenuto (vedere Overflow)

Fonte: centraggio assoluto orizzontale e verticale nei CSS

— Yisela
fonte
7
Questo ha funzionato per me, ma avevo bisogno di avere una larghezza e un'altezza fisse in cromo per qualche motivo
— Ryan Knell
1
Grazie. Avevo bisogno di una correzione in cui non avevo bisogno di calcolare l'altezza o la larghezza di px e questo ha funzionato perfettamente.
— GFoley83,
8
Ottima soluzione, soprattutto perché non hai bisogno di un genitore div
— Luca Steeb
1
Questo fa un allungamento se l'altezza non è fissa, a parte questo: bella soluzione
— Bart Burg
Se hai una larghezza e un'altezza che non sono al 100%, usamargin: auto;
— Charles L.
253

Il modo più semplice sarebbero le seguenti 3 righe di CSS:

1) posizione: relativa;

2) in alto: 50%;

3) trasforma: translateY (-50%);

Di seguito è riportato un ESEMPIO :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>
Espandi frammento

— DrupalFever
fonte
4
nota: non funziona correttamente se l'altezza del div esterno è impostata con "altezza minima: 170px"
— Bart Burg
3
Interferisce con z-index
— ripper234
4
non funziona quando l' heightesterno divè 100%. Quindi funziona solo con position: absolute;.
— Arch Linux Tux,
1
Avevo trovato prima questa soluzione altrove, ma complimenti extra a questa particolare risposta per menzionare la -webkit-transformvariante in particolare, di cui avevo bisogno per far funzionare questo metodo in phantomjs ... sono finite ore di difficoltà, quindi grazie!
— drmrbrewer,
2
Questa è la risposta migliore Questo è incredibilmente semplice, si scherza con la minima quantità di lavoro esistente e funzioni su tutto fino a IE9 che nessuno utilizza più. Consente a questo ragazzo di aggiungere altri voti!
— Nick Steele,
136

In realtà sono necessari due div per il centraggio verticale. Il div contenente il contenuto deve avere larghezza e altezza.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>
Espandi frammento

Ecco il risultato

— Vadim Ovchinnikov
fonte
4
è un vecchio trucco ... top 50% e il margine superiore negativo metà dell'altezza per il div interno
— Manatax
34
si presume che tu abbia un'altezza fissa per div. non funziona quando div può cambiare altezza.
— Andre Figueiredo,
116

Ora la soluzione flexbox è un modo molto semplice per i browser moderni, quindi ti consiglio questo:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>
Espandi frammento

— Santosh Khalse
fonte
1
Se hai una navbar, puoi modificare l'altezza usando height: calc(100% - 55px)o qualunque sia l'altezza della tua navbar.
— Adrian,
ho anche dovuto rimuovere i margini / imbottitura dal corpo
— Ben
Funziona bene con float. Grazie.
— Amir A. Shabani,
Si noti che questo potrebbe comportarsi in modo strano sui browser "mobile più vecchi" per i safari. L'uso raccomandato al posto dell'altezza è basato sulla flessibilità della classe .container
— Nine Magics,
78

Modifica 2020: utilizzalo solo se devi supportare vecchi browser come IE8 (cosa che dovresti rifiutare di fare 😉). In caso contrario, utilizzare flexbox.

Questo è il metodo più semplice che ho trovato e lo uso sempre ( demo jsFiddle qui )

Grazie a Chris Coyier di CSS Tricks per questo articolo .

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>
Espandi frammento

Il supporto inizia con IE8.

— Armel Larcier
fonte
Rifiutando il supporto per i vecchi browser, la soluzione per me non era la flexbox ma il sistema a griglia. Per me è stato un po 'fastidioso centrare il contenuto in un contenitore che, quando diventa troppo piccolo in altezza, doveva mostrare la barra di scorrimento e il contenuto centrato stava perdendo l'area di scorrimento con tutti gli altri metodi. Nel contenitore uso solo: {display: grid; align-items: center; } Spero che questo aiuti qualcuno.
— tomasofen,
63

Dopo molte ricerche ho finalmente trovato la soluzione definitiva. Funziona anche con elementi flottanti. Vedi la fonte 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
— ymakux
fonte
4
Funziona davvero bene, a patto di ricordare che l'elemento contenitore deve avere un'altezza implicita o esplicita; jsfiddle.net/14kt53un Un gotcha minore per coloro che sono relativamente nuovi al CSS.
— Martyn Shutt,
6
Tra tutte le risposte, questa è la più semplice! Spero che anche gli altri vedano la tua risposta! Grazie! A proposito, ha 50%funzionato per me (non -50%)
— The Codesee
È stato incredibile. Dopo ore di ricerche, questo ha funzionato per me. Ho dovuto usare translateY (50%), sono sicuro del perché, ma ha funzionato. Nel mio caso, il genitore è stato creato da AEM Forms Engine e posso controllare solo determinati elementi figlio.
— tarekahf,
41

Soluzione Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>
Espandi frammento

— Reggie Pinkham
fonte
3
Nota justify-content: centercentrerà gli oggetti anche in orizzontale
— Peter Berg,
36

Per centrare il div su una pagina, controlla il link del violino .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Espandi frammento

Un'altra opzione è quella di utilizzare la scatola flessibile, controllare il collegamento del violino .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}
<div class="vh">
    <div>Div to be aligned vertically</div>
</div>
Espandi frammento

Un'altra opzione è utilizzare una trasformazione CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Espandi frammento

— Nerdroid
fonte
3
@ArmelLarcier È errato. Unità relative sono percentuali %, ems e rems. I valori assoluti o fissi sono pixel o punti. Quello a cui ti riferisci è "funziona solo con un'altezza dichiarata". Tuttavia, sebbene questo metodo descritto da Moes richieda un'altezza, quando lo dichiari in unità relative, la percentuale è la migliore, indipendentemente dalla quantità di contenuto all'interno del DIV centrato che DIV si espanderà verticalmente per adattarsi al suo contenuto. Questa è la bellezza di questo metodo. L'altra cosa positiva è che questo metodo funziona in IE8 / 9/10 nel caso in cui qualcuno debba ancora supportare quei browser.
— Ricardo Zea,
@ricardozea Non intendo giocare testardo, ma dire che il div centrato si espanderà verticalmente mentre rimanere centrato verticalmente è sbagliato. Provalo. So che quando dico che l'altezza deve essere "fissa", non è la parola giusta. È effettivamente relativo, al suo genitore. Comunque penso che il metodo di Chris Coyer abbia più senso, vedi la mia risposta stackoverflow.com/a/21919578/1491212 È compatibile con IE8 E funziona su un elemento senza dimensioni specificate.
— Armel Larcier,
1
@ArmelLarcier Va tutto bene. Non è un fratello sbagliato. Prova: codepen.io/shshaw/pen/gEiDt - Aggiungi paragrafi alla casella verde;]. Certo, usa Modernizr per ottenere l'effetto, ma tutto sommato è fattibile. Ho visto la tua risposta e anche il post su CSS-Tricks.com, ma quel metodo non mi rende felice, usa un markup extra e il CSS è troppo dettagliato. Penso che la soluzione migliore sia usare la flexbox o la transform: translate(-50%, -50%);tecnica. Per IE8 lo lascerei semplicemente in alto / al centro e andrei avanti.
— Ricardo Zea,
1
@ricardozea Beh, il codice a cui ti sei collegato utilizza il metodo "display: table" e markup extra, quindi non sono sorpreso. Ad ogni modo, +1 all'ultima frase.
— Armel Larcier,
23

La soluzione più semplice è di seguito:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>
Espandi frammento

— Varsha Dhadge
fonte
2
Anzi il più semplice di sempre :) Anche se, ho dovuto impostare gli stili su un div esterno, anziché sul corpo.
— baburao,
21

Sfortunatamente - ma non a caso - la soluzione è più complicata di quanto si possa desiderare. Inoltre, sfortunatamente, dovrai utilizzare ulteriori div attorno al div che desideri centrato verticalmente.

Per i browser conformi agli standard come Mozilla, Opera, Safari, ecc. È necessario impostare il div esterno da visualizzare come tabella e il div interno da visualizzare come cella di tabella, che può quindi essere centrato verticalmente. Per Internet Explorer, è necessario posizionare il div interno in modo assoluto all'interno del div esterno e quindi specificare il valore superiore come 50% . Le pagine seguenti spiegano bene questa tecnica e forniscono anche alcuni esempi di codice:

Esiste anche una tecnica per eseguire il centraggio verticale utilizzando JavaScript. Lo dimostra l' allineamento verticale dei contenuti con JavaScript e CSS .

— lati
fonte
20

Se a qualcuno interessa solo Internet Explorer 10 (e versioni successive), usa flexbox:

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>
Espandi frammento

Supporto Flexbox: http://caniuse.com/flexbox

— bravedick
fonte
Android <4.4 non supporta align-items: center;!
— André Fiedler,
In realtà, supporta align-items: center; caniuse.com/#search=align-items
— t.mikael.d
@ t.mikael.d Potresti voler dare un'occhiata più da vicino a quel tavolo. Per Android <4.4, indica "Supporta solo le specifiche del vecchio flexbox e non supporta il wrapping".
— Nathan Osman,
15

Un modo moderno di centrare un elemento verticalmente sarebbe usare flexbox .

È necessario un genitore per decidere l'altezza e un bambino al centro.

L'esempio seguente centrerà un div al centro all'interno del tuo browser. Quello che è importante (nel mio esempio) è quello di impostare height: 100%per bodye htmle poi min-height: 100%al vostro contenitore.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>
Espandi frammento

— Marwelln
fonte
14

Centratura solo in verticale

Se non ti interessa Internet Explorer 6 e 7, puoi utilizzare una tecnica che coinvolge due contenitori.

Il contenitore esterno:

  • avrebbe dovuto display: table;

Il contenitore interno:

  • avrebbe dovuto display: table-cell;
  • avrebbe dovuto vertical-align: middle;

La casella del contenuto:

  • avrebbe dovuto display: inline-block;

Puoi aggiungere tutto il contenuto che vuoi nella casella del contenuto senza preoccuparti della sua larghezza o altezza!

demo:

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;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>
Espandi frammento

Vedi anche questo violino !

Centratura orizzontale e verticale

Se si desidera centrare sia in orizzontale che in verticale, è necessario anche quanto segue.

Il contenitore interno:

  • avrebbe dovuto text-align: center;

La casella del contenuto:

  • ad esempio , ricalibrare l' allineamento orizzontale del testo text-align: left;o text-align: right;, a meno che non si desideri centrare il testo

demo:

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;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>
Espandi frammento

Vedi anche questo violino !

— John Slegers
fonte
13 

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  
<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>
Espandi frammento

Correlati: centra un'immagine

— antelove
fonte
10

Questo è sempre dove vado quando devo tornare a questo problema .

Per coloro che non vogliono fare il salto:

  1. Specificare il contenitore padre come position:relativeoposition:absolute .
  2. Specificare un'altezza fissa sul contenitore figlio.
  3. Imposta position:absoluteetop:50% sul contenitore figlio per spostare la parte superiore in basso al centro del genitore.
  4. Imposta margine superiore: -yy dove yy è metà dell'altezza del contenitore figlio per spostare l'elemento verso l'alto.

Un esempio di questo nel codice:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>
— Ninx
fonte
9

Utilizzo della proprietà flex dei CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}
<div class="parent">
    <div class="child"></div>
</div>
Espandi frammento

o usando display: flex;emargin: auto;

Mostra snippet di codice

mostra centro di testo

Mostra snippet di codice

Utilizzo di percentuale (%) altezza e larghezza.

Mostra snippet di codice

— Deepu Reghunath
fonte
5

Griglia CSS

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>
Espandi frammento

— Andy Hoffman
fonte
5

Per i nuovi arrivati, prova 

display: flex;
align-items: center;
justify-content: center;
— Usman I
fonte
1
Aggiungi uno snippet di stack che mostri come questo codice CSS allinea verticalmente a div.
— Heretic Monkey il
funziona anche questo <div style="display:flex"><div style="margin:auto">Inner</div></div>
— idrisadetunmbi,
Mi sono imbattuto in questa meravigliosa spiegazione di allineare gli elementi e giustificare il contenuto. Deve leggere: stackoverflow.com/questions/42613359/…
— Usman I
4

La risposta di Billbad funziona solo con una larghezza fissa del .innerdiv. Questa soluzione funziona per una larghezza dinamica aggiungendo l'attributo text-align: centeral .outerdiv.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>
Espandi frammento

— Ruwen
fonte
Interessante! Sto usando una tecnica quasi identica! -> stackoverflow.com/questions/396145/...
— John Slegers
4

Le tre righe di codice che utilizzano transformfunzionano praticamente sui browser moderni e su Internet Explorer:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

Sto aggiungendo questa risposta poiché ho riscontrato una certa incompletezza nella versione precedente di questa risposta (e StackTranslate.it non mi consente di commentare semplicemente).

  1. Il parente 'position' rovina lo stile se il div corrente è nel corpo e non ha div contenitore. Tuttavia, "fixed" sembra funzionare, ma risolve ovviamente il contenuto al centro del viewport posizione: relativa

  2. Inoltre ho usato questo stile per centrare alcuni div sovrapposti e ho scoperto che in Mozilla tutti gli elementi all'interno di questo div trasformato avevano perso i loro bordi inferiori. Forse un problema di rendering. Ma aggiungendo solo l'imbottitura minima ad alcuni di essi è stato reso correttamente. Chrome e Internet Explorer (sorprendentemente) hanno reso le scatole senza bisogno di imbottiture Mozilla senza imbottiture interne Mozilla con imbottiture

— Mandark
fonte
3

Non risponde per la compatibilità del browser, ma anche per menzionare la nuova griglia e la non nuova funzionalità Flexbox.

Griglia

Da: Mozilla - Documentazione sulla griglia - Allinea div verticalmente

Supporto per browser: supporto per browser a griglia

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Supporto per browser: supporto per browser Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
— ctekk
fonte
3

Penso che una soluzione solida per tutti i browser senza usare flexbox - "align-items: center;" è una combinazione di display: table e vertical-align: middle ;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/

— Martin Wantke
fonte
2

L'ho fatto con questo (cambia larghezza, altezza, margine superiore e margine sinistro di conseguenza):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>
— Netuddki
fonte
Questo va bene solo se conosci la larghezza / altezza del DIV che stai cercando di centrare. Non è questa la domanda
— egr103,
2

Il contenuto può essere facilmente centrato utilizzando flexbox. Il codice seguente mostra il CSS per il contenitore all'interno del quale è necessario centrare il contenuto:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
— Mahendra Liya
fonte
2

Soprattutto per i div genitori con altezza relativa (sconosciuta), la centratura nell'ignoto soluzione funziona benissimo per me. Ci sono alcuni esempi di codice davvero belli nell'articolo.

È stato testato in Chrome, Firefox, Opera e Internet Explorer.

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

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>
Espandi frammento

— Ruwen
fonte
2

Fallo e basta: aggiungi la lezione a div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

E leggi questo articolo per una spiegazione. Nota: Heightè necessario.

— Anshul
fonte
2

C'è un trucco che ho scoperto di recente: devi usare top 50%e poi fai untranslateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}
<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>
Espandi frammento

— Melchia
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.