Como alinhar verticalmente o texto em uma div?

Estou tentando encontrar a maneira mais eficaz de alinhar o texto com uma div. Eu tentei algumas coisas e nenhuma parece funcionar.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Centralização vertical em CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Resumo do artigo:

Para um navegador CSS 2, é possível usar display:table/ display:table-cellpara centralizar o conteúdo.

Uma amostra também está disponível no JSFiddle :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

É possível mesclar hacks para navegadores antigos (Internet Explorer 6/7) em estilos usando #para ocultar estilos de navegadores mais recentes:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

Você precisa adicionar o line-heightatributo e esse atributo deve corresponder à altura do div. No seu caso:

.center {
  height: 309px;
  line-height: 309px; /* same as height! */
}

<div class="center">
  A single line.
</div>

De fato, você provavelmente poderia remover o heightatributo completamente.

Isso funciona apenas para uma linha de texto , portanto, tenha cuidado.

Aqui está um ótimo recurso

Em http://howtocenterincss.com/ :

Centrar em CSS é um pé no saco. Parece haver um zilhão de maneiras de fazer isso, dependendo de uma variedade de fatores. Isso os consolida e fornece o código necessário para cada situação.

Usando o Flexbox

De acordo com a atualização deste post com a tecnologia mais recente, aqui está uma maneira muito mais fácil de centralizar algo usando o Flexbox. O Flexbox não é suportado no Internet Explorer 9 e inferior .

Aqui estão alguns ótimos recursos:

• Um guia para o Flexbox
• Elementos de centralização com o Flexbox
• Sintaxe do Internet Explorer 10 para Flexbox
• Suporte para Flexbox

JSFiddle com prefixos de navegador

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  /* Column | row */
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Outra solução

É do zerosixthree e permite centralizar qualquer coisa com seis linhas de CSS

Este método não é suportado no Internet Explorer 8 e inferior .

jsfiddle

p {
  text-align: center;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

Resposta anterior

Uma abordagem simples e entre navegadores, útil como links na resposta marcada, está um pouco desatualizada.

Como centralizar vertical e horizontalmente o texto em uma lista não ordenada e em uma div sem recorrer às alturas de linha JavaScript ou CSS . Não importa quanto texto você tenha, você não precisará aplicar nenhuma classe especial a listas ou divs específicas (o código é o mesmo para cada uma). Isso funciona em todos os principais navegadores, incluindo Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Opera e Safari. Existem duas folhas de estilo especiais (uma para o Internet Explorer 7 e outra para o Internet Explorer 6) para ajudá-las devido às limitações de CSS que os navegadores modernos não possuem.

Andy Howard - Como centralizar vertical e horizontalmente o texto em uma lista ou divisão não ordenada

Como não me importava muito com o Internet Explorer 7/6 no último projeto em que trabalhei, usei uma versão um pouco simplificada (ou seja, removi as coisas que o faziam funcionar no Internet Explorer 7 e 6). Pode ser útil para outra pessoa ...

JSFiddle

.outerContainer {
  display: table;
  width: 100px;
  /* Width of parent */
  height: 100px;
  /* Height of parent */
  overflow: hidden;
}

.outerContainer .innerContainer {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

li {
  background: #ddd;
  width: 100px;
  height: 100px;
}

<ul>
  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>

  <li>
    <div class="outerContainer">
      <div class="innerContainer">
        <div class="element">
          <p>
            <!-- Content -->
            Content
          </p>
        </div>
      </div>
    </div>
  </li>
</ul>

É fácil com display: flex. Com o método a seguir, o texto no divserá centralizado verticalmente:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

E se você quiser, horizontal:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* More style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Você deve ver a versão do navegador que precisa; nas versões antigas, o código não funciona.

Eu uso o seguinte para centralizar verticalmente elementos aleatórios facilmente:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Isso centraliza o texto no meu divpara o meio vertical exato de um externo de 200px de altura div. Observe que você pode precisar usar um prefixo do navegador (como -webkit-no meu caso) para fazer isso funcionar no seu navegador.

Isso funciona não apenas para texto, mas também para outros elementos.

Você pode fazer isso configurando a exibição para 'table-cell' e aplicando um vertical-align: middle;:

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

No entanto, isso não é suportado por todas as versões do Internet Explorer, de acordo com este trecho que eu copiei de http://www.w3schools.com/cssref/pr_class_display.asp sem permissão.

Nota: Os valores "tabela em linha", "tabela", "legenda da tabela", "célula da tabela", "coluna da tabela", "grupo da coluna da tabela", "linha da tabela", "linha da tabela -group "e" herdar "não são suportados pelo Internet Explorer 7 e versões anteriores. O Internet Explorer 8 requer um! DOCTYPE. Internet Explorer 9 suporta os valores.

A tabela a seguir mostra os valores de exibição permitidos também em http://www.w3schools.com/cssref/pr_class_display.asp .

Hoje em dia (não precisamos mais do Internet Explorer 6-7-8), eu usaria CSS display: tablepara esse problema (ou display: flex).

Para navegadores mais antigos:

Mesa:

.vcenter {
    display: table;
    background: #eee; /* optional */
    width: 150px;
    height: 150px;
    text-align: center; /* optional */
}

.vcenter > :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>

Flex:

.vcenter {
    display: flex; /* <-- Here */
    align-items: center; /* <-- Here */
    justify-content: center; /* optional */
    height: 150px; /* <-- Here */
    background: #eee;  /* optional */
    width: 150px;
}

<div class="vcenter">
  <p>This is my text</p>
</div>

Esta é (na verdade, foi) minha solução favorita para esse problema (simples e muito bem suportado pelo navegador):

div {
    margin: 5px;
    text-align: center;
    display: inline-block;
}

.vcenter {
    background: #eee;  /* optional */
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}

.vcenter > :first-child {
    display: inline-block;
    vertical-align: middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br/>Text<br/>Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

Tente isso, adicione a div pai:

display: flex;
align-items: center;

Aqui está uma solução que funciona melhor para uma única linha de texto.

Também pode funcionar para texto com várias linhas, com alguns ajustes, se o número de linhas for conhecido.

.testimonialText {
    font-size: 1em; /* Set a font size */
}
.testimonialText:before { /* Add a pseudo element */
    content: "";
    display: block;
    height: 50%;
    margin-top: -0.5em; /* Half of the font size */
}

Aqui está um JSFiddle .

<!DOCTYPE html>
<html>

  <head>
    <style>
      .container {
        height: 250px;
        background: #f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>

</html>

Você pode alinhar o texto central verticalmente dentro de uma div usando o Flexbox.

<div>
   <p class="testimonialText">This is the testimonial text.</p>
</div>

div {
   display: flex;
   align-items: center;
}

Você pode aprender mais sobre isso em Um guia completo para o Flexbox .

Verifique esta solução simples:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float: left;
    display: block;
    width: 100%;
    height: 88px
}

.block-title h3 {
    display: table-cell;
    vertical-align: middle;
    height: inherit
}

JSFiddle

Existe uma maneira mais simples de alinhar verticalmente o conteúdo sem recorrer à tabela / célula de tabela:

http://jsfiddle.net/bBW5w/1/

Nele, adicionei uma div invisível (largura = 0) que assume toda a altura do contêiner.

Parece funcionar no Internet Explorer e Firefox (versões mais recentes). Não verifiquei com outros navegadores

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

E, claro, o CSS:

.t, .t > div:first-child
{
    border: 1px solid green;
}
.t
{
    height: 400px;
}
.t > div
{
    display: inline-block;
    vertical-align: middle
}
.t > div:last-child
{
    height: 100%;
}

Esta é a solução mais limpa que encontrei (Internet Explorer 9+) e adiciona uma correção para o problema "desativado por 0,5 pixel", usando transform-styleoutras respostas omitidas.

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

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

Fonte: Alinhar vertical qualquer coisa com apenas 3 linhas de CSS

Uma solução simples para um elemento de não conhecer valores:

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

De acordo com a resposta de Adam Tomat, foi preparado um exemplo do JSFiddle para alinhar o texto em div :

<div class="cells-block">    
    text<br/>in the block   
</div>

usando display: flex em CSS:

.cells-block {
    display: flex;
    flex-flow: column;
    align-items: center;       /* Vertically   */
    justify-content: flex-end; /* Horisontally */
    text-align: right;         /* Addition: for text's lines */
}

com outro exemplo e algumas explicações em uma postagem no blog .

Margem automática em um item de grade.

Da mesma forma que o Flexbox, a aplicação automática de margem em um item de grade o centraliza nos dois eixos:

.container {
  display: grid;
}
.element {
  margin: auto;
}

O Flexbox funcionou perfeitamente para mim, centralizando vários elementos dentro da divisão pai na horizontal e na vertical.

Código HTML:

<div class="parent-div">
    <div class="child-div">
      <a class="footer-link" href="https://www.github.com/">GitHub</a>
      <a class="footer-link" href="https://www.facebook.com/">Facebook</a>
      <p class="footer-copywrite">© 2019 Lorem Ipsum.</p>
    </div>
  </div>

Código CSS: o
código abaixo empilha todos os elementos dentro de parent-div em uma coluna, centralizando os elementos horizontalmente e verticalmente. Eu usei o child-div para manter os dois elementos Anchor na mesma linha (linha). Sem div-filho, todos os três elementos (Âncora, Âncora e Parágrafo) são empilhados na coluna do pai-div uma sobre a outra. Aqui, apenas child-div é empilhado dentro da coluna parent-div.

/* */
.parent-div {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Usar:

h1 {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.container {
    height: 200px;
    width: 500px;
    position: relative;
    border: 1px solid #eee;
}

<div class="container">
    <h1>Vertical align text</h1>
</div>

Com esse truque, você pode alinhar qualquer coisa, se não quiser colocá-lo no centro, adicione "left: 0" para alinhar à esquerda.

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative {
     position: relative;
 }
 .absolute {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.5);
 }
 .table {
     display: table;
     height: 100%;
     width: 100%;
     text-align: center;
     color: #fff;
 }
 .table-cell {
     display: table-cell;
     vertical-align: middle;
 }

Usando o flex, tenha cuidado com as diferenças na renderização dos navegadores.

Isso funciona bem no Chrome e no Internet Explorer:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

<div class="outer"><div class="inner">Active Tasks</div></div>

Compare com este que funciona apenas com o Chrome:

.outer {
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffc;
}

.inner {
    display: flex;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: #fcc;
}

<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div>

Esta é uma outra variação do divem um divpadrão usando calc()em CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Isso funciona porque:

• position:absolutepara posicionamento preciso do divdentro de umdiv
• nós sabemos a altura do interior divporque nós configurá-lo para 20px.
• calc(50% - 10px)para 50% - metade da altura para centralizar o interiordiv

Isso funciona bem:

HTML

<div class="information">
    <span>Some text</span>
    <mat-icon>info_outline</mat-icon>
</div>

Sass

.information {
    display: inline-block;
    padding: 4px 0;
    span {
        display: inline-block;
        vertical-align: middle;
    }
    mat-icon {
        vertical-align: middle;
    }
}

Sem e com a tag da imagem <mat-icon>(que é uma fonte).

Hmm, obviamente existem muitas maneiras de resolver isso.

Mas eu tenho um <div>que está posicionado absolutamente height:100%(na verdade, top:0;bottom:0e largura fixa) e display:table-cellsimplesmente não funcionou para centralizar o texto verticalmente. Minha solução exigia um elemento de amplitude interna, mas vejo muitas outras soluções também, então devo adicioná-lo:

Meu contêiner é um .labele quero o número centralizado verticalmente nele. Eu fiz isso posicionando absolutamente em top:50%e definindoline-height:0

<div class="label"><span>1.</span></div>

E o CSS é o seguinte:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Veja em ação: http://jsfiddle.net/jcward/7gMLx/

Você pode usar css flexbox.

.testimonialText {
  height: 500px;
  padding: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b4d2d2;
}

<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Usando grade CSS fez isso por mim:

.outer {
  background-color: grey;
  width: 10rem;
  height: 10rem;
  display: grid;
  justify-items: center;
}

.inner {
  background-color: red;
  align-self: center;
}

<div class='outer'>
  <div class='inner'>
    Content
  </div>
</div>

Tente incorporar um elemento da tabela.

<div>
  <table style='width:200px; height:100px;'>
    <td style='vertical-align:middle;'>
      copenhagen
    </td>
  </table>
</div>

Existem vários truques para exibir o conteúdo ou uma imagem no centro de uma div. Algumas das respostas são realmente legais e também concordo plenamente com elas.

Centralização horizontal e vertical absoluta em CSS

http://www.css-jquery-design.com/2013/12/css-techniques-absolute-horizontal-and-vertical-centering-in-css/

Existem mais de 10 técnicas com exemplos . Agora cabe a você o que você preferir.

Sem dúvida, display:table; display:table-Cellé um truque melhor.

Alguns bons truques são os seguintes:

Truque 1 - usando display:table; display:table-cell

HTML

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
        CONTENT
    </div>
  </div>
</div>

Código CSS

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

Truque 2 - Usando display:inline-block

HTML

<div class="Center-Container is-Inline">
  <div class="Center-Block">
     CONTENT
  </div>
</div>

Código CSS

.Center-Container.is-Inline {
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for Internet Explorer 9+ */
}

Truque 3 - Usando position:relative;position:absolute

<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
  <div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
    <h4>ABSOLUTE CENTER, <br/>
WITHIN CONTAINER.</h4>
    <p>This box is absolutely centered, horizontally and vertically, within its container</p>
  </div>
</div>

CSS:

.vertical {
   display: table-caption;
}

Adicione esta classe ao elemento que contém as coisas que você deseja alinhar verticalmente

Se você precisar usar com a min-heightpropriedade, adicione este CSS em:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}