Eu tenho um divconjunto para display:block( 90px heighte width) e tenho algum texto dentro.

Preciso que o texto seja alinhado no centro tanto vertical quanto horizontalmente.

Eu tentei text-align:center, mas não faz a parte horizontal, então tentei vertical-align:middle, mas não funcionou.

Alguma ideia?

Se é uma linha de texto e / ou imagem, é fácil fazê-lo. Apenas use:

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

É isso aí. Se pode haver várias linhas, é um pouco mais complicado. Mas existem soluções em http://pmob.co.uk/ . Procure por "alinhamento vertical".

Como eles tendem a ser hacks ou adicionando divs complicados ... eu costumo usar uma tabela com uma única célula para fazê-lo ... para torná-lo o mais simples possível.

Atualização para 2020:

A menos que você precise fazê-lo funcionar em navegadores anteriores, como o Internet Explorer 10, você pode usar o flexbox. É amplamente suportado por todos os principais navegadores atuais . Basicamente, o contêiner precisa ser especificado como um contêiner flexível, juntamente com a centralização ao longo do eixo principal e transversal:

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

Para especificar uma largura fixa para o filho, que é chamado de "item flexível":

#content {
  flex: 0 0 120px;
}

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

Para reduzir o conteúdo, é ainda mais simples: basta remover a flex: ...linha do item flexível e ele é automaticamente encolhido.

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

Os exemplos acima foram testados nos principais navegadores, incluindo o MS Edge e o Internet Explorer 11.

Uma observação técnica se você precisar personalizá-lo: dentro do item flex, como esse item não é um contêiner flex, a maneira antiga de CSS não-flexbox funciona como esperado. No entanto, se você adicionar um item flexível adicional ao contêiner flexível atual, os dois itens flexíveis serão posicionados horizontalmente. Para colocá-los na vertical, adicione-os flex-direction: column;ao contêiner flex. É assim que funciona entre um contêiner flex e seus elementos filhos imediatos .

Existe um método alternativo de centralizar: não especificando centera distribuição nos eixos principal e cruzado para o container flex, mas especifique margin: autono item flex para ocupar todo o espaço extra nas quatro direções e as margens distribuídas uniformemente tornará o item flexível centralizado em todas as direções. Isso funciona, exceto quando há vários itens flexíveis. Além disso, essa técnica funciona no MS Edge, mas não no Internet Explorer 11.

Atualização para 2016/2017:

Isso pode ser feito com mais frequência transforme funciona bem mesmo em navegadores mais antigos, como o Internet Explorer 10 e o Internet Explorer 11. Ele suporta várias linhas de texto:

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

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

Para encolher a largura:

A solução acima usou uma largura fixa para a área de conteúdo. Para usar uma largura reduzida, use

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

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

Se o suporte ao Internet Explorer 10 for necessário, o flexbox não funcionará e o método acima e o line-heightmétodo funcionariam. Caso contrário, o flexbox faria o trabalho.

Técnicas comuns a partir de 2014:

• Abordagem 1 - transform translateX/ translateY:

  Exemplo aqui / Exemplo em tela cheia

  Nos navegadores suportados (a maioria deles), você pode usar top: 50%/ left: 50%em combinação com translateX(-50%) translateY(-50%)para centralizar verticalmente / horizontalmente o elemento dinamicamente.

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

• Abordagem 2 - Método Flexbox:

  Exemplo aqui / Exemplo em tela cheia

  Nos navegadores suportados , defina o displayelemento de destino como flexe use align-items: centerpara centralização vertical e justify-content: centercentralização horizontal. Apenas não esqueça de adicionar prefixos de fornecedores para suporte adicional ao navegador ( veja o exemplo ).

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

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

  Exemplo aqui / Exemplo em tela cheia

  Em alguns casos, você precisará garantir que a altura do elemento html/ bodyesteja definida como 100%.

  Para o alinhamento vertical, definir o elemento pai width/ heighta 100%e adicione display: table. Em seguida, para o elemento filho, altere displaypara table-celle adicione vertical-align: middle.

  Para centralização horizontal, você pode adicionar text-align: centerpara centralizar o texto e quaisquer outros inlineelementos filhos. Como alternativa, você pode margin: 0 autoassumir que o elemento esteja blocknivelado.

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

• Abordagem 4 - Absolutamente posicionado a 50%partir do topo com deslocamento:

  Exemplo aqui / Exemplo em tela cheia

  Essa abordagem pressupõe que o texto tenha uma altura conhecida - neste caso 18px,. Posicione o elemento absolutamente 50%de cima, em relação ao elemento pai. Use um margin-topvalor negativo que seja metade da altura conhecida do elemento, neste 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;
  }

• Abordagem 5 - O line-heightmétodo (Menos flexível - não sugerido):

  Exemplo Aqui

  Em alguns casos, o elemento pai terá uma altura fixa. Para centralização vertical, tudo o que você precisa fazer é definir um line-heightvalor no elemento filho igual à altura fixa do elemento pai.

  Embora essa solução funcione em alguns casos, vale a pena notar que ela não funcionará quando houver várias linhas de texto - assim .

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

Os métodos 4 e 5 não são os mais confiáveis. Vá com um dos primeiros 3.

Usando flexbox / CSS:

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

O CSS:

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

Retirado da dica rápida: a maneira mais simples de centralizar elementos na vertical e na horizontal

Adicione a linha display: table-cell;ao seu conteúdo CSS para essa div.

Somente as células da tabela suportam o vertical-align: middle;, mas você pode dar essa definição [célula da tabela] para a div ...

Um exemplo ao vivo está aqui: 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
}

Eu sempre uso o seguinte CSS para um contêiner, para centralizar seu conteúdo horizontalmente e verticalmente.

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;

Veja em ação aqui: https://jsfiddle.net/yp1gusn7/

Você pode tentar um código muito fácil para isso:

  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>

Link do Codepen: http://codepen.io/santoshkhalse/pen/xRmZwr

Atribua esta classe CSS ao <div> direcionado:

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

Você pode usar a flexpropriedade no pai div e adicionar a margin:autopropriedade aos itens filhos:

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

Você pode ver mais opções flexaqui: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Abordagem 1

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

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

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

Abordagem 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
}

Isso funciona para mim (testado 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 */
}

Você pode escolher outros valores além de 50%. Por exemplo, 25% para centrar em 25% do pai.

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

Você pode tentar os seguintes métodos:

1. Se você tiver uma única palavra ou sentença de uma linha, o código a seguir pode resolver o problema.

   Coloque um texto dentro de uma tag div e forneça um ID. Defina as seguintes propriedades para esse ID.

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

   Nota: Verifique se a propriedade altura da linha é igual à altura da divisão.

   Imagem

   Mas, se o conteúdo tiver mais de uma única palavra ou linha, isso não funcionará. Além disso, haverá momentos em que você não poderá especificar o tamanho de uma divisão em px ou% (quando a divisão for realmente pequena e você desejar que o conteúdo esteja exatamente no meio).

2. Para resolver esse problema, podemos tentar a seguinte combinação de propriedades.

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

   Imagem

   Essas três linhas de código definem o conteúdo exatamente no meio de uma divisão (independentemente do tamanho da exibição). O "align-items: center" ajuda na centralização vertical, enquanto o "justify-content: center" o centraliza horizontalmente.

   Nota: O Flex não funciona em todos os navegadores. Adicione prefixos de fornecedor apropriados para suporte adicional ao navegador.

REDE

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

Ajustando a altura da linha para obter o alinhamento vertical.

line-height: 90px;

Essa deve ser a resposta certa. Mais limpo e simples:

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

Aplicar estilo:

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

Seu texto seria centralizado, independentemente do tamanho.

Isso funcionou para mim:

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

Para mim, essa foi a melhor solução:

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> 

Código realmente simples que funciona para mim! Apenas uma linha e seu texto serão centralizados horizontalmente.

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

A saída é assim:

Por favor vote nesta resposta se ela funcionar apenas para poupar algum tempo dos desenvolvedores procurando soluções fáceis. Obrigado! :)

Tente o seguinte exemplo. Adicionei exemplos para cada categoria: horizontal e vertical

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