kutombawewe.net

Come posso centrare verticalmente il testo con i CSS?

Ho un elemento div che contiene testo e voglio allineare il contenuto di questo div verticalmente al centro.

Ecco il mio stile div:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Qual è il modo migliore per farlo?

2067

Puoi provare questo approccio di base:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Funziona solo per una singola riga di testo, perché impostiamo l'altezza della linea alla stessa altezza dell'elemento box contenente.


Un approccio più versatile

Questo è un altro modo per allineare il testo verticalmente. Questa soluzione funzionerà per una singola riga e più righe di testo, ma richiede comunque un contenitore ad altezza fissa:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Il CSS dimensiona semplicemente <div>, centra verticalmente allinea il <span> impostando l'altezza della riga <div> uguale alla sua altezza e rende <span> un blocco in linea con vertical-align: middle. Quindi riporta l'altezza della linea alla normalità per <span>, quindi il suo contenuto scorrerà naturalmente all'interno del blocco.


Simulazione del display da tavolo

Ed ecco un'altra opzione, che potrebbe non funzionare su versioni precedenti di i browser che non supportano display: table e display: table-cell (in pratica solo Internet Explorer 7). Usando i CSS simuliamo il comportamento della tabella (poiché le tabelle supportano l'allineamento verticale) e l'HTML è lo stesso del secondo esempio:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Usando il posizionamento assoluto

Questa tecnica usa un elemento posizionato in modo assoluto in alto, in basso, a sinistra ea destra a 0. Viene descritto più dettagliatamente in un articolo su Smashing Magazine,CENTRATURA ORIZZONTALE E VERTICALE ASSOLUTA NEI CSS.

2671

Un altro modo (non menzionato qui ancora) è con Flexbox .

Basta aggiungere il seguente codice al container element:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

In alternativa, invece di allineare il contenuto tramite contenitore, flexbox può anche centrare l'elemento a flex con un margine automatico _ ​​quando c'è un solo elemento flessibile nel contenitore flessibile (come nell'esempio riportato nella domanda precedente).

Quindi per centrare l'elemento flessibile sia in orizzontale che in verticale basta impostarlo con margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Tutto quanto sopra si applica agli elementi di centraggio mentre li posiziona in righe orizzontali . Questo è anche il comportamento predefinito, perché di default il valore per flex-direction è row. Se, tuttavia, gli elementi flessibili devono essere disposti in colonne verticali , allora flex-direction: column deve essere impostato sul contenitore per impostare l'asse principale come colonna e inoltre le proprietà justify-content e align-items ora funzionano il in alternativa con justify-content: center centraggio verticale e align-items: center centraggio in orizzontale)

flex-direction: column demo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Un buon punto di partenza con Flexbox per vedere alcune delle sue funzionalità e ottenere la sintassi per il massimo supporto del browser è flexyboxes

Inoltre, il supporto browser al giorno d'oggi è molto buono: caniuse

Per la compatibilità cross-browser per display: flex e align-items, è possibile utilizzare quanto segue:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
1127
Danield

Puoi farlo facilmente aggiungendo il seguente codice CSS:

display: table-cell;
vertical-align: middle;

Ciò significa che il tuo CSS alla fine assomiglia a:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>
124
Ariful Islam

Per riferimento e per aggiungere una risposta più semplice:

CSS puro:

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

O come un Mixin SASS/SCSS:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Utilizzare per:

.class-to-center {
    @include vertical-align;
}

Dal post del blog di Sebastian Ekström Verticale allinea qualsiasi cosa con solo 3 righe di CSS:

Questo metodo può rendere gli elementi sfocati a causa dell'elemento posizionato su un "mezzo pixel". Una soluzione per questo è impostare l'elemento padre per preserve-3d. Mi piace seguire:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Viviamo nel 2015+ e Flex Box è supportato da tutti i principali browser moderni.

Sarà il modo in cui i siti web sono fatti da qui in avanti.

Impara!

109
BAR

Tutto il merito va al proprietario di questo link @Sebastian Ekström Link ; per favore passa attraverso questo Guardalo in azione codepen . Leggendo l'articolo sopra ho anche creato un demo fiddle .

Con solo tre righe di CSS (esclusi i prefissi dei fornitori) possiamo farlo con l'aiuto di una trasformazione: translateY centra verticalmente tutto ciò che vogliamo, anche se non conosciamo la sua altezza.

La trasformazione della proprietà CSS viene in genere utilizzata per gli elementi di rotazione e ridimensionamento, ma con la sua funzione translateY ora possiamo allineare verticalmente gli elementi. Di solito questo deve essere fatto con il posizionamento assoluto o l'impostazione delle altezze delle righe, ma queste richiedono di conoscere l'altezza dell'elemento o di lavorare solo su testo a riga singola, ecc.

Quindi, per fare questo scriviamo:

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

Questo è tutto ciò di cui hai bisogno. È una tecnica simile al metodo della posizione assoluta, ma con il lato positivo che non è necessario impostare alcuna altezza sull'elemento o sulla proprietà position sul genitore. Funziona subito, anche in Internet Explorer 9 !

Per renderlo ancora più semplice, possiamo scriverlo come mixin con i suoi prefissi dei venditori.

57
ankitd

Le Flexbox introdotte in CSS 3 sono la soluzione:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

Nota : Sostituisci la riga sopra la quale è contrassegnata come importante con una di queste linee, se vuoi centrare il testo:

1) Solo in verticale:

margin: auto 0;

2) Solo orizzontalmente:

margin: 0 auto;

Come ho notato, questo trucco funziona anche con griglie (display: griglia).

38
MAChitgarha

Approccio flessibile

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom: 5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>
20
Jürg

La soluzione accettata come risposta è perfetta per utilizzare line-height uguale all'altezza di div, ma questa soluzione non funziona perfettamente quando il testo è impacchettato OR è in due righe.

Prova questo se il testo è avvolto o è su più righe all'interno di un div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Per ulteriori riferimenti, vedere:

17
Pranav Singh

Prova questa soluzione :

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Costruito usando CSS + .

13
Marconi

Puoi anche usare sotto le proprietà.

display: flex; 
align-content: center; 
justify-content : center;
11
satwik

Un altro modo:

Non impostare l'attributo height di div, ma utilizzare padding: per ottenere l'effetto. Analogamente all'altezza della linea, funziona solo se hai una riga di testo. Sebbene in questo modo, se si dispone di più contenuti, il testo sarà comunque centrato, ma il div stesso sarà leggermente più grande.

Quindi, invece di andare con:

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

Si può dire:

div {
   padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}

Questo imposta il padding superiore e inferiore del div a 60px, e il padding di sinistra e destra a zero, rendendo alto il div di 120 pixel (più l'altezza del font) e posizionando il testo verticalmente centrato nel div.

10
Eseirt

È possibile utilizzare il seguente snippet di codice come riferimento. Funziona come un fascino per me:

<!DOCTYPE html>
    <html lang="de">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
            <div class="centered-text">
                <h1>Yes, it's my landing page</h1>
                <h2>Under construction, coming soon!!!</h2>
            </div>
        </body>
    </html>

L'output dello snippet di codice sopra riportato è il seguente:

 Enter image description here

Credito codice sorgente:Come posso centrare verticalmente il testo con i CSS? - Codice Puran

9
Akshay Pethani

Ancora migliore idea per questo. Puoi fare anche questo

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>
5
Kumar

Non sono sicuro che qualcuno abbia seguito il percorso writing-mode, ma penso che risolva il problema in modo pulito e abbia ampio supporto :

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Questo, ovviamente, funzionerà con qualsiasi dimensione di cui hai bisogno (oltre al 100% del genitore). Se disattivi le linee del bordo, sarà utile familiarizzare.

Demo di JSFiddle per farti smanettare.

Supporto Canius : 85,22% + 6,26% = 91,48% (anche Internet Explorer è in!)

5
Carles Alcolea

Per tutte le esigenze di allineamento verticale!

Dichiara questo Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Quindi includilo nel tuo elemento:

.element{
    @include vertical-align();
}
5
Gothburz

Ecco un'altra opzione con Flexbox.

HTML

<div id="container">
  <div class="child">
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >
  </div>
</div>

CSS

  #container {
    display: flex;
  }

  .child {
    margin: auto;
  }

Risultato

 Enter image description here

4
Long Tran

Il seguente codice metterà il div al centro dello schermo indipendentemente dalle dimensioni dello schermo o dalla dimensione div:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Vedi maggiori dettagli su flexhere .

3
Caner

Il modo semplice e versatile è (come l'approccio alla tabella di Michielvoo ):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

L'utilizzo di questo attributo (o di una classe equivalente) su un tag principale funziona anche per allineare molti bambini:

<parent ctrv>  <ch1/>  <ch2/>   </parent>
3
bortunac

Prova il seguente codice:

display: table-cell;
vertical-align: middle;
div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
3
Rafiqul Islam

Prova la proprietà di trasformazione:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
3
sstauross

Ho visto le risposte precedenti e funzioneranno solo per quella larghezza dello schermo (non reattivo). Per i reattivi devi usare flex.

Esempio:

div{ display:flex; align-item:center;}
3

Per una singola riga di testo (o un singolo carattere) puoi usare questa tecnica:

It può essere usato quando #box ha un'altezza non fissa, relativa in% .

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Guarda una demo dal vivo a JsBin (più facile da modificare CSS) o JsFiddle (più facile cambiare l'altezza del fotogramma dei risultati).

Se vuoi inserire il testo interno in HTML, non in CSS, devi avvolgere il contenuto del testo in un ulteriore elemento inline e modificare #box::after per abbinarlo. (E, ovviamente, la proprietà content: dovrebbe essere rimossa.)

Ad esempio, <div id="box"><span>TextContent</span></div>. In questo caso, #box::after dovrebbe essere sostituito con #box span.

Per il supporto di Internet Explorer 8 è necessario sostituire :: con :.

3
user

Una soluzione molto semplice e potente per allineare verticalmente il centro:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>
3
Manish Kumar

Avevo bisogno di una fila di elefanti cliccabili, centrati verticalmente, ma senza usare un tavolo per aggirare la stranezza di Internet Explorer 9.

Alla fine ho trovato il CSS più bello (per i miei bisogni) ed è fantastico con Firefox, Chrome e Internet Explorer 11. Purtroppo Internet Explorer 9 continua a ridere di me ...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Ovviamente non hai bisogno dei bordi, ma possono aiutarti a vedere come funziona.

2
Dave

Vorrei solo estendere la risposta di Michielvoo al fine di liberare la necessità di altezza della linea e respirazione dell'altezza div. È fondamentalmente solo una versione semplificata come questa:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

NOTA: la parte commentata di cssè necessaria per fixed-height di racchiudere div.

2
mPrinC

Impostalo su button invece di div se non ti interessa il suo piccolo effetto visivo 3D.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>
1
URL87

Puoi usare il metodo di posizionamento in CSS:

Controlla il risultato qui ....

HTML:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

Spero che tu usi anche questo metodo.

1
Sivaprakash D

Questo è facile e molto breve:

.block {
  display: table-row;
  vertical-align: middle;
}

.tile {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 100px;
}
<div class="body">
  <span class="tile">
    Hello middle world! :)
  </span>
</div>
1
<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>
0
Nikit Barochiya
.element{position: relative;top: 50%;transform: translateY(-50%);}

Aggiungi questo piccolo codice nella proprietà CSS del tuo elemento. È fantastico. Provalo!

0
Rahul

I browser più recenti supportano ora la funzione CSS calc. Se stai prendendo di mira questi browser, potresti voler fare qualcosa del genere:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

La chiave è usare style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" all'interno di un div padre assoluto o relativamente posizionato.

0
bruceceng

Ovunque tu voglia lo stile centrale verticale, puoi provare display:table-cell e vertical-align:middle.

Esempio:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
0
Ayyappan K

Posizionamento e stiramento assoluti

Come con il metodo sopra questo inizia impostando il posizionamento sugli elementi padre e figlio rispettivamente come relativi e assoluti. Da lì le cose sono diverse.

Nel codice qui sotto ho usato ancora una volta questo metodo per centrare il bambino sia orizzontalmente che verticalmente, sebbene tu possa usare il metodo solo per il centraggio verticale.

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

L'idea con questo metodo è di provare a far sì che l'elemento figlio si estenda su tutti e quattro i bordi impostando i valori superiore, inferiore, destro e sinistro su 0. Poiché il nostro elemento figlio è più piccolo dei nostri elementi genitore non può raggiungere tutto quattro bordi.

L'impostazione automatica come margine su tutti e quattro i lati, tuttavia, fa sì che i margini opposti siano uguali e mostra il nostro div child al centro del div genitore.

Sfortunatamente quanto sopra non funzionerà in Internet Explorer 7 e versioni precedenti, e come il metodo precedente il contenuto all'interno del div figlio può diventare troppo grande, causandone la presenza.

0
ArifMustafa
.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>
0
antelove