texto - css3 centralizar verticalmente




Como centralizar verticalmente uma div para todos os navegadores? (20)

Centrando apenas na vertical

Se você não se importa com o Internet Explorer 6 e 7, é possível usar uma técnica que envolva dois contêineres.

O recipiente externo:

  • deve ter display: table;

O recipiente interno:

  • deve ter display: table-cell;
  • deve ter vertical-align: middle;

A caixa de conteúdo:

  • deve ter display: inline-block;

Você pode adicionar qualquer conteúdo que desejar à caixa de conteúdo sem se importar com sua largura ou altura!

Demonstração:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Veja também este violino !

Centrando horizontalmente e verticalmente

Se você quiser centralizar horizontalmente e verticalmente, também precisará do seguinte.

O recipiente interno:

  • deve ter text-align: center;

A caixa de conteúdo:

  • deve reajustar o alinhamento de texto horizontal para, por exemplo, text-align: left; ou text-align: right; , a menos que você queira que o texto seja centrado

Demonstração:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

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

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

Veja também este violino !

Eu quero centrar um div verticalmente com CSS. Eu não quero tabelas ou JavaScript, mas apenas CSS puro. Eu encontrei algumas soluções, mas todas elas estão faltando o suporte do Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

Como posso centralizar uma div verticalmente em todos os principais navegadores, incluindo o Internet Explorer 6?


Solução Flexbox

Notas
1. O elemento pai recebe o nome da classe.
2. Adicione os prefixos flex do fornecedor, se exigido pelos navegadores suportados .

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>


A resposta de Billbad só funciona com uma largura fixa do div .inner . Essa solução funciona para uma largura dinâmica, adicionando o atributo text-align: center ao div.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>


A solução mais fácil está abaixo:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
}
.inner-div{
  margin: auto;
  text-align:center;
}
<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>



Acho isso muito útil .. dá o layout mais preciso de 'H' e é muito simples de entender.

O benefício nessa marcação é que você defina seu tamanho de conteúdo em um único local -> "PageContent".
As cores do plano de fundo da página e suas margens horizontais são definidas em seus respectivos divs.

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

E aqui com o CSS separado:

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}

As três linhas de código usando transform funcionam praticamente em navegadores modernos e no Internet Explorer:

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

Eu estou adicionando esta resposta desde que encontrei alguma incompletude na versão anterior desta resposta (e o não me permite simplesmente comentar).

  1. O parente 'position' atrapalha o estilo se o div atual estiver no corpo e não tiver nenhum div no container. No entanto, 'fixo' parece funcionar, mas, obviamente, corrige o conteúdo no centro da viewport

  2. Também usei esse estilo para centralizar alguns divs de sobreposição e descobri que no Mozilla todos os elementos dentro desse div transformado haviam perdido suas bordas inferiores. Possivelmente, um problema de renderização. Mas adicionando apenas o preenchimento mínimo para alguns deles processou corretamente. O Chrome e o Internet Explorer (surpreendentemente) renderizaram as caixas sem necessidade de preenchimento


Basta fazer: adicione a turma em sua div :

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

E leia este artigo para uma explicação. Nota: A Height é necessária.


Especialmente para divs pai com altura relativa (desconhecida), a centralização na solução desconhecida funciona muito bem para mim. Existem alguns exemplos de código realmente interessantes no artigo.

Foi testado no Chrome, Firefox, Opera e Internet Explorer.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>


Esta solução funcionou para mim se você tem um elemento de bloco (por exemplo). Eu usei as cores para tornar a solução mais clara.

HTML:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

Demonstração do código JSFiddle


Este é sempre o lugar aonde vou quando tenho que voltar a este assunto .

Para quem não quer dar o salto:

  1. Especifique o contêiner pai como position:relative ou position:absolute .
  2. Especifique uma altura fixa no contêiner filho.
  3. Definir position:absolute e top:50% no contêiner filho para mover a parte superior até o meio do pai.
  4. Set margin-top: -yy onde yy é metade da altura do container filho para compensar o item acima.

Um exemplo disso no código:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

Eu acho uma solução sólida para todos os navegadores sem usar o flexbox - "align-items: center;" é uma combinação de display: table e vertical-align: middle ;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣Demo: https://jsfiddle.net/6m640rpp/


Eu uso isso. Funciona no Internet Explorer 8 e posterior:

height:268px - para display:table funciona como min-height.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

Infelizmente - mas não surpreendentemente - a solução é mais complicada do que se poderia desejar. Também, infelizmente, você precisará usar divs adicionais em torno da div que você deseja centralizar verticalmente.

Para navegadores compatíveis com os padrões, como Mozilla, Opera, Safari, etc., você precisa definir o div externo a ser exibido como uma tabela e o div interno a ser exibido como uma célula de tabela - que pode ser centralizada verticalmente. Para o Internet Explorer, você precisa posicionar a div interna absolutamente dentro da div externa e, em seguida, especificar a parte superior como 50% . As páginas a seguir explicam bem essa técnica e também fornecem alguns exemplos de código:

Há também uma técnica para fazer a centralização vertical usando JavaScript. O alinhamento vertical do conteúdo com JavaScript e CSS demonstra isso.


Não respondendo pela compatibilidade do navegador, mas também para mencionar o novo Grid e o não tão novo recurso do Flexbox.

Grade

De: Mozilla - Documentação Grid - Align Div Verticalmente

Suporte ao Navegador: Suporte ao Navegador de Grade

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Suporte ao Navegador: Suporte ao Navegador Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Na verdade, você precisa de dois div's para a centralização vertical. O div que contém o conteúdo deve ter largura e altura.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Aqui é o result


O link a seguir apresenta uma maneira simples de fazer isso com apenas 3 linhas no seu CSS:

Alinhar vertical qualquer coisa com apenas 3 linhas de CSS .

Créditos para : Sebastian Ekström .

Eu sei que a pergunta já tem uma resposta no entanto eu vi utilidade no link por sua simplicidade.


O seguinte está funcionando no meu caso e foi testado no Firefox.

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

A altura do div e a altura do pai são dinâmicas. Eu o uso quando há outros elementos no mesmo pai que é maior que o elemento de destino, onde ambos são posicionados horizontalmente em linha.


Se alguém se importa apenas com o Internet Explorer 10 (e posterior), use o flexbox :

.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}
<div class="parent">
    <div class="centered"></div>
</div>

Suporte para Flexbox: http://caniuse.com/flexbox


Uma maneira moderna de centralizar um elemento verticalmente seria usar o flexbox .

Você precisa de um pai para decidir a altura e uma criança para o centro.

O exemplo abaixo centralizará uma div no centro de seu navegador. O que é importante (no meu exemplo) é definir height: 100% para body e html e, em seguida, min-height: 100% para seu contêiner.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>







centering