Come allineare verticalmente gli elementi in un div?

Ho un div con due immagini e un h1. Tutti devono essere allineati verticalmente all'interno del div, uno accanto all'altro.

Una delle immagini deve essere absoluteposizionata all'interno del div.

Di cosa ha bisogno il CSS per farlo funzionare su tutti i browser comuni?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>

Caspita, questo problema è popolare. Si basa su un malinteso nella vertical-alignproprietà. Questo eccellente articolo lo spiega:

Comprensione vertical-aligno "Come (non) centrare verticalmente il contenuto" di Gavin Kistner.

"Come centrare in CSS" è un ottimo strumento web che aiuta a trovare gli attributi di centraggio CSS necessari per situazioni diverse.

In breve _{^{(e per prevenire la putrefazione del collegamento)}} :

• Gli elementi incorporati (e solo gli elementi incorporati) possono essere allineati verticalmente nel loro contesto tramite vertical-align: middle. Tuttavia, il "contesto" non è l'altezza dell'intero contenitore principale, è l'altezza della riga di testo in cui si trovano. Esempio di jsfiddle
• Per gli elementi a blocchi, l'allineamento verticale è più difficile e dipende fortemente dalla situazione specifica:
  • Se l'elemento interno può avere un'altezza fissa , è possibile effettuare la propria posizione absolutee specificare la sua height, margin-tope topla posizione. esempio jsfiddle
  • Se l'elemento centrato è costituito da una singola linea e la sua altezza padre è fissa , puoi semplicemente impostare il contenitore line-heightper riempire la sua altezza. Questo metodo è abbastanza versatile nella mia esperienza. esempio jsfiddle
  • ... ci sono più casi così speciali.

Ora che il supporto flexbox sta aumentando, questo CSS applicato all'elemento contenitore centrerebbe verticalmente l'elemento contenuto:

.container {        
    display: flex;
    align-items: center;
}

Utilizza la versione con prefisso se devi anche scegliere come target Explorer 10 e i browser Android (<4.4) precedenti:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

Ho usato questo codice molto semplice:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Ovviamente, se si utilizza a .classo an #id, il risultato non cambierà.

Ha funzionato per me:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

Una tecnica da un mio amico:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO qui

Per posizionare gli elementi del blocco al centro (funziona in IE9 e versioni successive), è necessario un wrapper div:

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

Tutti devono essere allineati verticalmente all'interno del div

Allineato come ? Le parti superiori delle immagini sono allineate con la parte superiore del testo?

Una delle immagini deve essere posizionata in modo assoluto all'interno del div.

Assolutamente posizionato rispetto al DIV? Forse potresti delineare quello che stai cercando ...?

fd ha descritto i passaggi per il posizionamento assoluto, oltre a regolare la visualizzazione H1dell'elemento in modo tale che le immagini appaiano allineate con esso. A ciò, aggiungerò che puoi allineare le immagini usando lo vertical-alignstile:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... questo metterebbe insieme l'intestazione e le immagini, con i bordi superiori allineati. Esistono altre opzioni di allineamento; vedi la documentazione . Potresti anche trovare utile eliminare il DIV e spostare le immagini all'interno H1dell'elemento: ciò fornisce un valore semantico al contenitore ed elimina la necessità di regolare la visualizzazione di H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

Usa questa formula e funzionerà sempre senza crepe:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Quasi tutti i metodi devono specificare l'altezza, ma spesso non abbiamo altezze.
Quindi ecco un trucco a 3 linee CSS3 che non richiede di conoscere l'altezza.

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

È supportato anche in IE9.

con i suoi prefissi fornitore:

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

Fonte: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

In due modi, è possibile allineare gli elementi in verticale e in orizzontale

1. Bootstrap 4
2. CSS3

1. Bootstrap 4.3.X

per allineamento verticale: d-flex align-items-center

per allineamento orizzontale: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}

<div class="container">
  <div class="child">I am in Center</div>
</div>

Il mio trucco è mettere all'interno del div una tabella con 1 riga e 1 colonna, impostare il 100% di larghezza e altezza e la proprietà vertical-align: middle.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Fiddle: http://jsfiddle.net/joan16v/sbqjnn9q/

# 3 modi per rendere div il figlio centrale in un div genitore

• Metodo di posizionamento assoluto
• Metodo Flexbox

• Metodo di trasformazione / traduzione

  

  dimostrazione

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Utilizzando CSS al centro verticale, puoi lasciare che i contenitori esterni si comportino come una tabella e il contenuto come una cella di tabella. In questo formato i tuoi oggetti rimarranno centrati. :)

Ho nidificato più oggetti in JSFiddle per un esempio, ma l'idea di base è questa:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

L'esempio di più oggetti:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Risultato

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Per impostazione predefinita, h1 è un elemento a blocchi e verrà visualizzato sulla riga dopo il primo img e farà apparire il secondo img sulla riga dopo il blocco.

Per evitare che ciò accada, puoi impostare h1 in modo che abbia un comportamento di flusso in linea:

#header > h1 { display: inline; }

Per quanto riguarda il posizionamento assoluto dell'img all'interno del div , è necessario impostare il div contenente su una "dimensione nota" prima che funzioni correttamente. Nella mia esperienza, devi anche cambiare l'attributo position lontano da default - position: relative funziona per me:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Se riesci a farlo funzionare, potresti provare a rimuovere progressivamente l'altezza, la larghezza, gli attributi di posizione da div.header per ottenere gli attributi minimi richiesti per ottenere l'effetto desiderato.

AGGIORNARE:

Ecco un esempio completo che funziona su Firefox 3:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>

È possibile utilizzare un calcolo della funzione CSS per calcolare la dimensione dell'elemento e quindi posizionare l'elemento figlio di conseguenza.

HTML di esempio:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

E CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Demo creata qui: https://jsfiddle.net/xnjq1t22/

Questa soluzione funziona bene con reattivo div heightewidth pure.

Nota: la funzione calc non è stata testata per la compatibilità con i vecchi browser.

Ad oggi, ho trovato una nuova soluzione alternativa per allineare verticalmente più righe di testo in un div usando CSS3 (e sto anche usando il sistema di griglia bootstrap v3 per abbellire l'interfaccia utente), che è come di seguito:

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Secondo la mia comprensione, l'immediato genitore del testo contenente elementi deve avere un'altezza. Spero che possa aiutarti anche tu. Grazie!

Il mio nuovo modo preferito per farlo è con una griglia CSS:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}

<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Basta usare una tabella a una cella all'interno del div! Basta impostare l'altezza della cella e della tabella e con su 100% e puoi usare l'allineamento verticale.

Un tavolo a una cella all'interno del div gestisce l'allineamento verticale ed è retrocompatibile fino all'età della pietra!

Sto usando la seguente soluzione (senza posizionamento e senza altezza della linea) da oltre un anno, funziona anche con IE 7 e 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

Questa è la mia soluzione personale per un elemento i all'interno di un div

Esempio JSFiddle

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

Per me ha funzionato in questo modo:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

L'elemento "a" viene convertito in un pulsante, usando le classi Bootstrap, ed è ora centrato verticalmente all'interno di un "div" esterno.

usando display flex, prima devi avvolgere il contenitore dell'elemento che vuoi allineare.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

quindi applicare il seguente css a wrapper div o outdiv nel mio esempio

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}

Solo questo:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Un tavolo a una cella all'interno del div gestisce l'allineamento verticale ed è retrocompatibile fino all'età della pietra!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>

Ecco solo un altro approccio (reattivo):

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

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Sono un ragazzo di .NET che è appena entrato nella programmazione web. Non ho usato CSS (beh, un po '). Ho usato un po 'di JavaScript per realizzare il centraggio verticale insieme alla funzione .css di jQuery.

Sto solo postando tutto dal mio test. Probabilmente non è eccessivamente elegante, ma funziona così lontano.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>

<div id="header" style="display: table-cell; vertical-align:middle;">

...

o CSS

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

Copertura del browser