Domanda 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?


1804
2018-01-14 21:25


origine


risposte:


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 misura solo il <div>, il centro verticale allinea il <span> impostando il <div>L 'altezza della linea è uguale alla sua altezza e rende il <span> un blocco in linea con vertical-align: middle. Quindi imposta l'altezza della linea su normale per il <span>, quindi il suo contenuto scorrerà naturalmente all'interno del blocco.


Simulazione del display da tavolo

E qui c'è un'altra opzione, che potrebbe non funzionare su vecchi 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>


Utilizzando il posizionamento assoluto

Questa tecnica usa un elemento posizionato in modo assoluto in alto, in basso, a sinistra ea destra a 0. È descritto in maggior dettaglio in un articolo su Smashing Magazine, Centratura orizzontale e verticale assoluta in CSS.


2447
2018-03-06 08:15



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

Basta aggiungere il seguente codice al contenitore elemento:

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

Demo Flexbox 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, la flexbox può anche centrare l'a oggetto flessibile con un margine automatico  quando c'è un solo oggetto flessibile nel contenitore flessibile (come nell'esempio riportato nella domanda precedente).

Quindi per centrare l'elemento flessibile sia orizzontalmente che verticalmente basta impostarlo 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 durante la posa righe orizzontali. Questo è anche il comportamento predefinito, perché di default il valore per flex-direction è row. Se, tuttavia, è necessario predisporre elementi flessibili colonne verticali, poi flex-direction: column dovrebbe essere impostato sul contenitore per impostare l'asse principale come colonna e in aggiunta il justify-content e align-items le proprietà ora funzionano viceversa con justify-content: center centrando verticalmente e align-items: center centrando orizzontalmente)

flex-direction: column dimostrazione

.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: posso usare

Compatibilità cross-browser per display: flex e align-items, puoi usare il seguente:

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;

956
2018-01-14 21:29



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>


109
2017-10-25 18:12



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 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 Allineare verticalmente qualsiasi cosa con solo 3 linee 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 oltre Flex Box è supportato da tutti i principali browser moderni.

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

Imparalo!


97
2017-08-11 11:59



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

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 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 solo di lavorare 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 immediatamente, anche in Internet Explorer 9!

Per renderlo ancora più semplice, possiamo scriverlo come un mixin con i suoi prefissi del venditore.


49
2017-12-13 20:09



Le Flexbox introdotte nei CSS3 sono la soluzione:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

Nota: Sostituisci la linea sopra la quale è contrassegnato 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;

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


22
2018-06-29 09:26



La soluzione accettata come risposta è perfetta da usare line-height lo stesso dell'altezza di div, ma questa soluzione non funziona perfettamente quando il testo è avvolto o è 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:


13
2017-08-28 10:11



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>


12
2018-04-15 08:28



Puoi anche usare sotto le proprietà.

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

9
2017-12-01 18:06



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


9
2018-05-28 07:41