Ho un divset su display:block( 90px heighte width) e ho del testo dentro.

Ho bisogno che il testo sia allineato al centro sia in verticale che in orizzontale.

Ho provato text-align:center, ma non fa la parte orizzontale, quindi ho provato vertical-align:middle, ma non ha funzionato.

Qualche idea?

Se è una riga di testo e / o immagine, allora è facile da fare. Usa solo:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Questo è tutto. Se può essere più righe, allora è un po 'più complicato. Ma ci sono soluzioni su http://pmob.co.uk/ . Cerca "allineamento verticale".

Dal momento che tendono ad essere hack o aggiungere div complicati ... Di solito uso una tabella con una singola cella per farlo ... per renderlo il più semplice possibile.

Aggiornamento per il 2020:

A meno che non sia necessario farlo funzionare su browser precedenti come Internet Explorer 10, è possibile utilizzare flexbox. È ampiamente supportato da tutti i principali browser attuali . Fondamentalmente, il contenitore deve essere specificato come contenitore flessibile, insieme al centraggio lungo il suo asse principale e trasversale:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Per specificare una larghezza fissa per il figlio, che viene chiamato "elemento flessibile":

#content {
  flex: 0 0 120px;
}

Esempio: http://jsfiddle.net/2woqsef1/1/

Per ridurre il contenuto, è ancora più semplice: basta rimuovere la flex: ...linea dall'elemento flessibile e viene automaticamente rimpicciolito.

Esempio: http://jsfiddle.net/2woqsef1/2/

Gli esempi sopra sono stati testati sui principali browser tra cui MS Edge e Internet Explorer 11.

Una nota tecnica se è necessario personalizzarla: all'interno dell'articolo flessibile, poiché questo oggetto flessibile non è un contenitore flessibile stesso, il vecchio modo non flessibile di CSS funziona come previsto. Tuttavia, se si aggiunge un altro oggetto flessibile all'attuale contenitore flessibile, i due oggetti flessibili verranno posizionati orizzontalmente. Per renderli posizionati verticalmente, aggiungere il flex-direction: column;al contenitore flessibile. Funziona così tra un contenitore flessibile e i suoi elementi figlio immediati .

Esiste un metodo alternativo per eseguire il centraggio: non specificando centerla distribuzione sull'asse principale e trasversale per il contenitore flessibile, ma piuttosto margin: autosull'elemento flessibile per occupare tutto lo spazio extra in tutte e quattro le direzioni e i margini uniformemente distribuiti renderà l'oggetto flessibile centrato in tutte le direzioni. Funziona tranne quando ci sono più oggetti flessibili. Inoltre, questa tecnica funziona su MS Edge ma non su Internet Explorer 11.

Aggiornamento 2016/2016:

Può essere fatto più comunemente con transforme funziona bene anche nei browser più vecchi come Internet Explorer 10 e Internet Explorer 11. Può supportare più righe di testo:

position: relative;
top: 50%;
transform: translateY(-50%);

Esempio: https://jsfiddle.net/wb8u02kL/1/

Per ridurre la larghezza:

La soluzione sopra utilizzata utilizzava una larghezza fissa per l'area del contenuto. Per utilizzare una larghezza con involucro termoretraibile, utilizzare

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Esempio: https://jsfiddle.net/wb8u02kL/2/

Se è necessario il supporto per Internet Explorer 10, allora flexbox non funzionerà e il metodo sopra e il line-heightmetodo funzionerebbero. Altrimenti, flexbox farebbe il lavoro.

Tecniche comuni a partire dal 2014:

• Approccio 1 - transform translateX/ translateY:

  Esempio qui / Esempio di schermo intero

  Nei browser supportati (la maggior parte di essi), è possibile utilizzare top: 50%/ left: 50%in combinazione con translateX(-50%) translateY(-50%)per centrare dinamicamente verticalmente / orizzontalmente l'elemento.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }

• Approccio 2 - Metodo Flexbox:

  Esempio qui / Esempio di schermo intero

  Nei browser supportati , impostare l' displayelemento di destinazione su flexe utilizzarlo align-items: centerper la centratura verticale e justify-content: centerper la centratura orizzontale. Non dimenticare di aggiungere i prefissi del fornitore per il supporto aggiuntivo del browser ( vedi esempio ).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }

• Approccio 3 - table-cell/ vertical-align: middle:

  Esempio qui / Esempio di schermo intero

  In alcuni casi, dovrai assicurarti che l' altezza dell'elemento html/ bodysia impostata su 100%.

  Per l'allineamento verticale, imposta l'elemento genitore width/ heightsu 100%e aggiungi display: table. Quindi per l'elemento figlio, modifica displayin table-celle aggiungi vertical-align: middle.

  Per la centratura orizzontale, è possibile aggiungere text-align: centerper centrare il testo e tutti gli altri inlineelementi figlio. In alternativa, è possibile utilizzare margin: 0 autosupponendo che l'elemento sia a blocklivello.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }

• Approccio 4 - Assolutamente posizionato 50%dall'alto con spostamento:

  Esempio qui / Esempio di schermo intero

  Questo approccio presuppone che il testo presenta un'altezza nota - in questo caso, 18px. Posiziona assolutamente l'elemento 50%dall'alto, rispetto all'elemento genitore. Utilizzare un margin-topvalore negativo che è metà dell'altezza nota dell'elemento, in questo caso - -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }

• Approccio 5 - Il line-heightmetodo (almeno flessibile - non consigliato):

  Esempio qui

  In alcuni casi, l'elemento genitore avrà un'altezza fissa. Per il centraggio verticale, tutto ciò che devi fare è impostare un line-heightvalore sull'elemento figlio uguale all'altezza fissa dell'elemento padre.

  Sebbene questa soluzione funzionerà in alcuni casi, vale la pena notare che non funzionerà quando ci sono più righe di testo - in questo modo .

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }

I metodi 4 e 5 non sono i più affidabili. Vai con uno dei primi 3.

Utilizzando flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

Il CSS:

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

Tratto da Suggerimento rapido: il modo più semplice per centrare gli elementi in verticale e in orizzontale

Aggiungi la linea display: table-cell;al tuo contenuto CSS per quel div.

Solo le celle di tabella supportano il vertical-align: middle;, ma puoi dare quella definizione [table-cell] al div ...

Un esempio dal vivo è qui: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Uso sempre il CSS seguente per un contenitore, per centrare il suo contenuto in orizzontale e in verticale.

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

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

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

Guardalo in azione qui: https://jsfiddle.net/yp1gusn7/

Puoi provare un codice molto semplice per questo:

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

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Collegamento Codepen: http://codepen.io/santoshkhalse/pen/xRmZwr

Dai questa classe CSS al <div> di destinazione:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

È possibile utilizzare la flexproprietà nel genitore div e aggiungere la margin:autoproprietà agli elementi figlio:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Puoi vedere più opzioni flexqui: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Approccio 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Approccio 2

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>

Approccio 3

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>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Questo funziona per me (testato OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Puoi scegliere altri valori oltre al 50%. Ad esempio, il 25% al ​​centro al 25% del genitore.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Puoi provare i seguenti metodi:

1. Se hai una sola parola o una frase di riga, il seguente codice può fare il trucco.

   Inserisci un testo all'interno di un tag div e assegnagli un ID. Definire le seguenti proprietà per quell'id.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   Nota: assicurarsi che la proprietà dell'altezza della linea sia uguale all'altezza della divisione.

   Immagine

   Ma, se il contenuto è più di una sola parola o una riga, questo non funziona. Inoltre, ci saranno momenti in cui non è possibile specificare la dimensione di una divisione in px o% (quando la divisione è veramente piccola e si desidera che il contenuto sia esattamente nel mezzo).

2. Per risolvere questo problema, possiamo provare la seguente combinazione di proprietà.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   Immagine

   Queste 3 righe di codice impostano il contenuto esattamente nel mezzo di una divisione (indipendentemente dalle dimensioni del display). Il "align-voci: Centro" aiuta nella centratura verticale mentre "justify-contenuti: Centro" renderà centrata orizzontalmente.

   Nota: Flex non funziona in tutti i browser. Assicurati di aggiungere i prefissi del fornitore appropriati per ulteriore supporto del browser.

GRIGLIA

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Regolazione dell'altezza della linea per ottenere l'allineamento verticale.

line-height: 90px;

Questa dovrebbe essere la risposta giusta. Più pulito e semplice:

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

Applicare stile:

position: absolute;
top: 50%;
left: 0;
right: 0;

Il testo sarà centrato indipendentemente dalla sua lunghezza.

Questo ha funzionato per me:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Per me questa è stata la soluzione migliore:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Codice davvero semplice che funziona per me! Solo una riga e il testo sarà centrato orizzontalmente.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

L'output è simile al seguente:

Per favore vota questa risposta se funziona solo per risparmiare un po 'di tempo agli sviluppatori che cercano soluzioni facili. Grazie! :)

Prova il seguente esempio. Ho aggiunto esempi per ogni categoria: orizzontale e verticale

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>