Como verticalmente do centro de conteúdo com altura variável dentro de uma div?

Question

Qual é a melhor maneira vertical do centro de conteúdo de uma div, quando a altura do conteúdo é variável.No meu caso em particular, a altura do contêiner div é fixo, mas seria ótimo se houvesse uma solução que funciona nos casos em que o contentor tem uma altura variável, conforme bem.Além disso, eu gostaria de uma solução com nenhuma, ou muito pouca utilização de CSS hacks e/ou não-marcação semântica.

Answer 1

Basta adicionar

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

para o interior div.

O que ele faz é mover o interior div limite superior para a meia altura do div externas (top: 50%;) e, em seguida, o interior div até metade de sua altura (transform: translateY(-50%)).Isso vai funcionar com position: absolute ou relative.

Tenha em mente que transform e translate tem fornecedor prefixos que não são incluídas para manter a simplicidade.

Codepen: http://codepen.io/anon/pen/ZYprdb

Answer 2

Esta parece ser a melhor solução que eu encontrei para este problema, contanto que o seu navegador suporta o ::before o pseudo-elemento: CSS-Tricks:Centralização na Desconhecido.

Ele não requer qualquer tipo de marcação extra e parece funcionar muito bem.Eu não podia usar o display: table método porque table elementos não obedecer a max-height propriedade.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Answer 3

Isso é algo que eu precisava fazer muitas vezes e uma solução consistente ainda exige que você adicione um pouco de não-marcação semântica e alguns específico de navegador hacks.Quando temos o suporte do navegador para o css 3, você vai ter o seu centralizar vertical sem pecar.

Para uma melhor explicação da técnica que você pode olhar o artigo que eu adaptei-a partir de, mas basicamente envolve a adição de um elemento extra e aplicar estilos diferentes em IE e navegadores que suportam position:table\table-cell sobre a não-elementos da tabela.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

Há muitas maneiras (hacks) para aplicar estilos em conjuntos específicos de navegadores.Eu usei comentários condicionais, mas olhada no artigo do link acima para ver outras duas técnicas.

Nota:Existem maneiras simples para obter vertical de centralização se você sabe de algum alturas com antecedência, se você está tentando centro de uma única linha de texto, ou em vários outros casos.Se você tiver mais detalhes, em seguida, jogá-los, pois pode haver um método que não requer navegador hacks ou não-marcação semântica.

Atualização: Estamos começando a ficar melhor navegador suporte para CSS3, trazendo ambos flex-caixa e transforma como métodos alternativos para a obtenção de centralizar vertical (entre outros efeitos).Ver esta outra questão para obter mais informações sobre os métodos modernos, mas tenha em mente que o suporte de browser está ainda incompleta para CSS3.

Answer 4

Usando a criança seletor, eu tenho tido Fadi incrível resposta acima e fervida é apenas uma regra CSS que eu possa aplicar.Agora tudo o que eu preciso fazer é adicionar o contentCentered nome da classe para elementos quero center:

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

Parágrafos CodePen: http://codepen.io/dougli/pen/Eeysg

Answer 5

O melhor resultado para mim até agora:

div ser centralizado:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Answer 6

Você pode usar a margem de auto.Com o flex, o div parece ser centrado na vertical também.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Answer 7

Esta é a minha incrível solução para um div com uma dinâmica (percentaged) de altura.

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

Tente isso por si mesmo.