Come centrare verticalmente un div per tutti i browser?

StackOverflow https://stackoverflow.com/questions/396145

Domanda

Voglio centrare a div verticalmente con CSS.Non voglio tabelle o JavaScript, ma solo CSS puri.Ho trovato alcune soluzioni, ma in tutte manca il supporto per Internet Explorer 6.

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

Come posso centrare a div verticalmente in tutti i principali browser, incluso Internet Explorer 6?

È stato utile?

Soluzione

Di seguito è la migliore soluzione all-around ho potuto costruire verticalmente e orizzontalmente centrare una larghezza fissa, altezza flessibile contenuto. E '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>

Vedi un esempio di lavoro con contenuto dinamico

ho costruito in qualche contenuti dinamici per testare la flessibilità e piacerebbe sapere se qualcuno vede alcun problema con esso. Dovrebbe funzionare bene per le sovrapposizioni centrati anche -. Lightbox, pop-up, ecc

Altri suggerimenti

Un altro non riesco a vedere nella lista: 

.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 (tra cui Internet Explorer 8 - Internet Explorer 10, senza hack)
  • reattiva con percentuali e min- / max -
  • Centrato indipendentemente imbottitura (senza scatola-dimensionamento!)
  • height deve essere dichiarata (vedi altezza variabile )
  • Impostazione consigliata overflow: auto per evitare spillover contenuti (vedi overflow)

Fonte: assoluta orizzontale e centratura verticale In CSS

Il modo più semplice sarebbe la seguente 3 linee di CSS:

1) position: relative;

2) superiore: 50%;

3) trasformare: translateY (-50%);

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>

In realtà avete bisogno di due div per la centratura verticale. Il div che contiene il contenuto deve avere una 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>

Ecco il provocare

Ora la soluzione FlexBox è un modo molto semplice per i browser moderni, quindi vi consiglio questo per voi: 

.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>

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

Grazie Chris Coyier da Trucchi CSS 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>

Supporto inizia con IE8.

Dopo molte ricerche ho finalmente trovato la soluzione definitiva. Funziona anche per gli elementi flottanti. Visualizza origine 

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

Per centrare il div in una pagina, controllare il link 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>

Un'altra opzione è quella di utilizzare Box Flex, controllare il link 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>

Un'altra opzione è quella di utilizzare un CSS 3 transform: 

#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>

soluzione Flexbox

Note
1. L'elemento padre viene dato il nome della classe.
2. Aggiungere prefissi vendor flex se richiesto dal supportati i browser . 

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

Purtroppo - ma non sorprendentemente - la soluzione è più complicata di quanto si possa desiderio di essere. Inoltre, purtroppo, è necessario utilizzare div aggiuntivi intorno al div che si desidera centrato verticalmente.

Per gli standard-compliant browser come Mozilla, Opera, Safari, ecc è necessario impostare il div esterno per essere visualizzato come tabella e il div interno da visualizzare come Tavolo -cell - che possono poi essere centrato verticalmente. Per Internet Explorer, è necessario posizione il div interno assolutamente all'interno del div esterno e quindi specificare il top come 50% . Le pagine seguenti spiegano questa tecnica bene e forniscono alcuni esempi di codice troppo:

C'è anche una tecnica per fare la centratura verticale utilizzando JavaScript. allineamento verticale del contenuto con JavaScript e CSS lo dimostra.

Se qualcuno si preoccupa per Internet Explorer 10 (e versioni successive) solo, l'uso 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>

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

La soluzione più semplice è il seguente: 

.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>

Un modo moderno per centrare un elemento verticale sarebbe quella di utilizzare flexbox .

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

L'esempio qui di seguito vi centrare un div al centro all'interno del tuo browser. Quello che è importante (nel mio esempio) è quella di impostare height: 100% a body e html e 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>

centraggio solo verticalmente

Se non si cura di Internet Explorer 6 e 7, è possibile utilizzare una tecnica che prevede due contenitori.

Il contenitore esterno:

  • dovrebbe avere display: table;

Il contenitore interno:

  • dovrebbe avere display: table-cell;
  • dovrebbe avere vertical-align: middle;

La casella di contenuti:

  • dovrebbe avere display: inline-block;

È possibile aggiungere qualsiasi contenuto che si desidera la casella contenuti senza preoccuparsi 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>

Si veda anche questa Fiddle !

centratura orizzontale e verticale

Se si desidera centrare sia orizzontalmente che verticalmente, è necessario anche quanto segue.

Il contenitore interno:

  • dovrebbe avere text-align: center;

La casella di contenuti:

  • dovrebbe regolare nuovamente il testo-allineamento orizzontale per esempio text-align: left; o text-align: right;, a meno che non si desidera che il testo deve essere centrato

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>

Si veda anche questa Fiddle ! 

.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>

Related: Centro di un'immagine

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

Per chi non vuole fare il salto:

  1. Specificare il contenitore padre come position:relative o position:absolute.
  2. Specifica un'altezza fissa sul contenitore del bambino.
  3. Imposta position:absolute e top:50% sul contenitore bambino a muoversi verso il basso fino alla metà del genitore.
  4. Imposta margin-top: -yy dove YY è la metà dell'altezza del contenitore figlio di compensare l'articolo.

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>

Ho appena scritto questo CSS e di saperne di più, si prega di passare attraverso: Questo articolo con verticale allineare nulla con solo 3 righe di CSS . 

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

Utilizzo di proprietà flessione del 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>

o utilizzando display: flex; e margin: auto; 

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

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

Mostra del centro del testo 

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

Utilizzo percentuale (%) di altezza e larghezza. 

.parent {
    position: absolute;
    height:100%;
    width:100%;
    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>

La risposta da Billbad funziona solo con una larghezza fissa del div .inner. Questa soluzione funziona per una larghezza dinamica aggiungendo l'text-align: center attributo al div .outer. 

.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>

Il seguente link presenta un modo semplice di farlo con solo 3 linee nel vostro CSS:

Allineamento verticale nulla con solo 3 linee di CSS .

  

Credits a :. Sebastian Ekström

So che la domanda ha già una risposta però ho visto utilità nel collegamento per la sua semplicità.

Non rispondere per la compatibilità del browser, ma di menzionare anche la nuova griglia e il non così nuova funzionalità Flexbox.

Griglia

Da: Mozilla - Griglia Documentazione - Allinea Div verticalmente

Supporto browser: Supporto browser 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 browser: Flexbox browser di supporto

CSS: 

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

I tre righe di codice utilizzando transform funziona praticamente su browser moderni e Internet Explorer: 

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

Io sono l'aggiunta questa risposta dal momento che ho trovato un po 'incompletezza nella precedente versione di questa risposta (e Stack Overflow non mi permette di commentare semplicemente).

  1. 'Posizione' relative scombina lo styling se il div attuale è nel corpo e non ha div contenitore. Tuttavia 'fisso' sembra funzionare, ma si risolve ovviamente il contenuto al centro della finestra position: relative

  2. Inoltre ho usato questo stile per centrare alcuni div overlay e ha 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 l'aggiunta di solo l'imbottitura minimo per alcuni di loro resi correttamente. Chrome e Internet Explorer (sorprendentemente) rese le caselle senza alcuna necessità di imbottitura Mozilla senza imbottiture interne Mozilla con imbottiture

Credo che una soluzione solida per tutti i browser senza usare FlexBox - "align-voci: center;" è una combinazione di display: table e verticale-align:. mediana;

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/

CSS Griglia 

body, html { margin: 0; }

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

L'ho fatto con questo (larghezza cambiamento, altezza, margin-top e margin-left di conseguenza): 

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

<div class="wrapper"> -- Content -- </div>

Soprattutto per div genitore con relativa (sconosciuto) Altezza, il centraggio nell'ignoto soluzione grandi opere per me. Ci sono alcuni esempi di codice veramente bello in questo articolo.

E '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>

C'è un trucco che ho scoperto di recente: È necessario utilizzare top 50% e poi si fa un translateY(-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>

Per i nuovi arrivati, prova 

display: flex;
align-items: center;
justify-content: center;

Trovo che questo sia più utile .. dà il layout il più preciso 'H' ed è molto semplice da capire.

Il vantaggio in questo markup è che si definisce la dimensione dei contenuti in un unico luogo -> "PageContent".
I colori di sfondo della pagina ei suoi margini orizzontali sono definiti nelle loro corrispondenti div. 

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

E qui con i CSS separati: 

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}

I contenuti possono essere facilmente centrati utilizzando FlexBox. Il codice seguente mostra il CSS per il contenitore all'interno del quale il contenuto deve essere centrato: 

.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;
}
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top