Como alinhar verticalmente o texto em uma div?


1185

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>





Respostas:


782

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>


3
O primeiro link é melhor, acho que, embora pareça complicado, porque o segundo link usa apenas uma linha de texto ou uma imagem cuja altura você conhece. E se você tiver 2 ou 3 linhas de texto ou se não souber a altura do seu texto, isso poderá variar. Como isso funcionaria com a altura da linha? Entao, para resumir. Eu testei a primeira versão e funciona no IE, Firefox e CHROME.
Raul

954
Eu não entendo, por que devemos subverter isso? É o século XXI! por que eles simplesmente não incluem uma opção maldita para alinhar texto maldito verticalmente em css ... assim: centralização do conteúdo: tanto vertical como vertical ou horizontalmente. é inacreditável que a tecnologia usada por anos seja tão burra.
Alexander.Iljushkin

34
@ Flextra: É por isso que as pessoas ainda usam tabelas para o layout da grade. O alinhamento vertical (ou qualquer coisa com altura e dados dinâmicos) pode ser desafiador com CSS puro. Você precisa estar disposto a fazer hacks estranhos como esse (derrota um pouco a idéia de "separar conteúdo do layout"), ou pegar o hit de renderização de várias passagens e usar tabelas não estáticas. Nunca recebi reclamações de usuários finais, tableapesar de que rotineiramente quebro o coração dos fãs de CSS. A maioria deles cria apenas blogs simples e sites estáticos. Alguns de nós desenvolvem software comercial e precisam de exibição densa de dados, e nossos usuários se preocupam mais com a funcionalidade.
nothingisnecessary

6
Sim. Não me entenda mal, se eu criar um "site", eu uso o lean html e prefiro CSS puro, mas não sei quantas vezes lutei com o alinhamento de coisas por horas, quando apenas disse 'F it' e usei um table. As coisas estão melhores agora, mas alguns de nós que desenvolvemos aplicativos da Web para negócios precisam oferecer suporte a navegadores mais antigos (o IE6 ainda está em uso em alguns clientes!), Enquanto as pessoas que criam blogs podem viver nas nuvens e fingir que todo mundo no mundo tem um conexão rápida, computador novo, e a última versão do navegador X com CSS 3, etc. Caso em questão: alguns plugins Jira usar tabelas com uma fila de layout (ou fez qualquer maneira)
nothingisnecessary

61
É bastante ridículo que as tabelas sejam desaprovadas como algum tipo de hack antiquado que apenas um novato usaria, e aqui estamos usando "display: table-cell" em uma DIV como uma solução muito mais hackier.
Desty 6/02/15

744

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.


368
Eu acredito que isso só é válido se você tiver uma única linha de texto na div.
WEFX 1/11/11

49
Absolutamente, você teria espaçamento de linhas maluco no seu texto se ele fosse executado em mais de uma linha.
David David

1
@BobChatting, sim. Veja minha resposta para uma solução que permite várias linhas de texto.
Adam Tomate

2
propaga line-height para todas as crianças
KVM

4
não trabalha com porcentagem: height: 100%; altura da linha: 100%
albanx 02/07/2015

477

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:

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>


2
Sem problemas. Eu ainda prefiro usar, height: x; line-height: x;mas com mais frequência do que eu não preciso de várias linhas de texto. É por isso que eu amo essa solução. Simples, reutilizável, em vários navegadores, sem js e requer apenas uma pequena marcação extra.
Adam Tomat

Se o texto for maior que a caixa, ele transbordará. Eu tentei várias maneiras de impedir o estouro, mas todas elas aparentemente entram em conflito com a exibição de tabela e célula de tabela. Assim que restrito o estouro, a centralização vertical para de funcionar. jsfiddle.net/2HHLE Alguma idéia?
Thomas David Baker

Para responder à minha própria pergunta, se você colocar as div de tabela / célula de tabela em outra div com largura / altura e estouros fixos: overflow: hidden que fará o truque. Eu escrevi-o em bluebones.net/2013/03/…
Thomas David Baker

2
@ThomasDavidBaker, a outra solução, se você precisar que eles sejam dinâmicos, é definir uma altura de 100%. Aqui está um jsfiddle , basicamente alterado height: 100px;para height: 100%;para o lie para .outerContainer.
Adam Tomat 11/03/2013

2
Não quero ser um apontador de nariz aqui, mas na segunda solução do zerosixthree. Há um erro de digitação no CSS em "- wekbit -transform: translateY (-50%);" Ainda assim, muito obrigado !! Ótima solução!
Gnagy

186

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


Curto e doce ... do jeito que deve ser fazer algo tão simples. Obras no IE 11, Chrome e Firefox ... bom o suficiente para mim
splashout

Esta resposta funciona com o posicionamento de texto dentro de objetos estranhos em svg. Obrigado!

1
Eu acredito: Flex é remédio para tudo!
precisa saber é o seguinte

1
text-align: centeré necessário também, porque a largura do texto longo de preenchimento e será alinhado à esquerda
Denis Kolodin

Eu sempre tive problemas com isso e odeio absolutamente a resposta de aumentar a altura da linha. Isso funcionou muito bem.
Jed Lynch

109

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.


3
Eu obtive resultados mais confiáveis ​​com position: absolute;- Obrigado! NB Você pode querer incluído -ms-transformou IE vai encher outra coisa-se
Wilf

Plunker sugere colocar -web-kit-transformantes transform. Talvez adicionar -ms-transformpossa resolver o problema de @ ToniMichelCaubet.
Sakovias

39

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 .

Digite a descrição da imagem aqui


2
Boa ideia! exibir:-célula da tabela tem outros efeitos, mas se você está bem com eles esta é uma boa solução
Brian Low

Também é importante adicionar a altura do elemento.
Elan Perach

Infelizmente overflow: hidden não funciona em exibição: table-cell
TheJeff 20/17/17

32

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>


2
@Irmray, ele está basicamente adicionando um elemento de bloco inline com largura de 0px ao lado do texto (o pseudo: antes). No entanto, este bloco falso tem uma altura de 100%, o que é o truque. Como o bloco e o texto estão alinhados em v, eles são renderizados conforme o esperado.
Dan H

1
melhor resposta, solução limpa, IE8 suportado
Rocco

Quando o texto termina, você pode ter problemas com isso. Corrigi-o adicionando o seguinte ao elemento aninhado: width: 95%; vertical-align: middle;
trgraglia

se o texto for muito longo, não funcionará. Você tem uma solução? jsfiddle.net/cyxuy95q
beta

Como sugerido no comentário anterior ao seu, definir max-width 95% jsfiddle.net/cyxuy95q/1
Toni Michel Caubet

28

Tente isso, adicione a div pai:

display: flex;
align-items: center;

1
I como este - simples e funciona em navegadores modernos
Casper Skovgaard

8

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 .


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

Funcionou como um encanto ao alinhar verticalmente: meio; e todo o resto falhou.
precisa saber é o seguinte

7

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 .


6

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


5

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

5

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


4

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%);
}

4

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 .


4

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

4

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

3

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.


2

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

2

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>


1

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

1
A
divisão

1

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


0

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/


1
Bom porque é a solução mais simples. A desvantagem é que ele funciona apenas para texto de linha única; consulte a bifurcação do exemplo com texto mais longo. jsfiddle.net/6sWfw
Tomas Tintera

0

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>


0

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>


0

Tente incorporar um elemento da tabela.

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


6
As tabelas são apenas para lidar com dados tabulares. Eles nunca devem ser usados ​​para corrigir problemas de layout.
Micros

3
O bom das tabelas, porém, é que elas são sempre consistentes - o CSS é interpretado de várias maneiras diferentes, e colocar DIVs aninhados apenas para simplificar o processo adiciona mais HTML (e confusão). CSS ainda é grosseiramente falho
MC9000

4
Sim, infelizmente ainda é a única maneira confiável de alinhar verticalmente o texto (desconhecido) em um bloco. Por que os deuses do CSS odeiam tanto o valor? (ALL navegador pode fazê-lo de forma consistente - mas apenas em células de tabela)
T4NK3R

-1

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&nbsp;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>

-2

CSS:

.vertical {
   display: table-caption;
}

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


-2

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

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.