vertical - css centralize a div




Como centralizar verticalmente o conteúdo com altura variável dentro de uma div? (5)

Basta adicionar

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

para o interior div.

O que ele faz é mover a borda superior da div interna para a metade da altura da div externa ( top: 50%; ) e, em seguida, a div interna para cima pela metade da sua altura ( transform: translateY(-50%) ). Isso funcionará com a position: absolute ou relative .

Tenha em mente que transform e translate têm prefixos de fornecedores que não são incluídos para simplificar.

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

Qual é a melhor maneira de centralizar verticalmente o conteúdo de um div quando a altura do conteúdo é variável. No meu caso particular, a altura do div do contêiner é fixa, mas seria ótimo se houvesse uma solução que funcionasse nos casos em que o contêiner tivesse uma altura variável também. Além disso, eu adoraria uma solução sem ou com muito pouco uso de hacks de CSS e / ou marcação sem-semântica.


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

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


Isso é algo que precisei fazer muitas vezes e uma solução consistente ainda requer que você adicione um pouco de marcação não-semântica e alguns hacks específicos do navegador. Quando tivermos suporte ao navegador para o css 3, você obterá sua centralização vertical sem pecar.

Para uma melhor explicação da técnica, você pode procurar o artigo do qual eu o adaptei , mas basicamente envolve adicionar um elemento extra e aplicar diferentes estilos no IE e navegadores que suportam position:table\table-cell em elementos que não são de 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) de aplicar estilos em conjuntos específicos de navegadores. Eu usei comentários condicionais, mas veja o artigo ligado acima para ver duas outras técnicas.

Nota: Existem maneiras simples de obter a centralização vertical se você souber antecipadamente algumas alturas, se estiver tentando centralizar uma única linha de texto ou em vários outros casos. Se você tiver mais detalhes, envie-os porque pode haver um método que não requer hacks de navegador ou marcação sem-semântica.

Atualização: Estamos começando a obter um melhor suporte ao navegador para CSS3, trazendo flexbox e transformações como métodos alternativos para obter a centralização vertical (entre outros efeitos). Veja esta outra pergunta para obter mais informações sobre métodos modernos, mas lembre-se de que o suporte ao navegador ainda é incompleto para o CSS3.


Melhor resultado para mim até agora:

div a ser centralizado:

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

Você pode usar a margem automática. Com o flex, o div parece estar 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>




vertical-alignment