Como centro verticalmente um div para todos os navegadores?

https://stackoverflow.com/questions/396145

29-08-2019
|

Pergunta

Eu quero centralizar um div verticalmente com CSS. Eu não quero tabelas ou JavaScript, mas apenas CSS puro. Eu encontrei algumas soluções, mas todos eles estão faltando Internet Explorer 6 apoio.

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

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

Solução

A seguir é a melhor solução all-around eu poderia construir a vertical e horizontalmente centralizar uma largura fixa, altura flexível caixa de conteúdo. Ele foi testado e trabalhando em versões recentes do Firefox, Opera, Chrome e Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

conteúdo Ver A Trabalho Exemplo Com dinâmico

Eu construí em algum conteúdo dinâmico para testar a flexibilidade e gostaria de saber se alguém vê qualquer problema com ele. Ele deve funcionar bem para sobreposições centradas também -. Lightbox, pop-up, etc

Outras dicas

Uma mais eu não posso ver na lista:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

Cross-browser (incluindo Internet Explorer 8 - Internet Explorer 10, sem hacks)
Responsive com porcentagens e min- / max -
Centrado independentemente de preenchimento (sem a caixa-sizing!)
height deve ser declarada (ver Variável Altura )
Recomendado configuração overflow: auto para evitar transbordamento de conteúdo (ver Overflow)

_{Fonte: Absolute Horizontal e Vertical Centering Em CSS}

A maneira mais simples seria o seguinte 3 linhas de CSS:

1) Posição: relativa;

2) superior: 50%;

3) transformar: translateY (-50%);

A seguir é um Exemplo :

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

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

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

Na verdade, você precisa de duas de div para a centragem vertical. A div que contém o conteúdo deve ter uma 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 é resultado do

Agora, a solução flexbox é uma maneira muito fácil para os navegadores modernos, então eu recomendo isso para você:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

Este é o método mais simples eu encontrei e eu usá-lo o tempo todo ( jsFiddle demonstração aqui )

Obrigado Chris Coyier de truques CSS para este artigo .

html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%; 
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

Suporte começa com IE8.

Depois de muita pesquisa, eu finalmente encontrei a solução definitiva. Ele funciona até mesmo para elementos flutuantes. View Source

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

Para centralizar o div em uma página, confira o link fiddle .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

Outra opção é usar a caixa de flex, confira o link fiddle .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Outra opção é usar um CSS 3 transform:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

solução Flexbox

Notas
1. O elemento pai é dado o nome da classe.
2. Adicione prefixos de fornecedores flexíveis, se exigido pelo seu navegadores suportados .

.verticallyCenter {
  display: flex;
  align-items: center;
}

<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

Infelizmente - mas não surpreendentemente - a solução é mais complicada do que seria de desejar que ele seja. Além disso, infelizmente, você vai precisar usar divs adicionais ao redor da div que você deseja centralizado verticalmente.

Para navegadores compatíveis com padrões como o Mozilla, Opera, Safari, etc. Você precisa definir o div externa a ser exibido como um tabela e a div interna para ser exibido como um mesa -cell - que pode então ser centralizado verticalmente. Para o Internet Explorer, você precisa posição o div interna absolutamente dentro do div externo e, em seguida, especificar o top como 50% . As páginas seguintes explicam esta técnica bem e fornecer alguns exemplos de código também:

Vertical Centering em CSS
~~Vertical Centering em CSS com Desconhecido Altura (Internet Explorer 7 compatível)~~ (não ao vivo)
Vertical Centering em CSS com desconhecido altura (Internet Explorer 7 compatível) (arquivada artigo cortesia do Wayback Machine)

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

Se alguém se importa para o Internet Explorer 10 (e mais tarde), apenas, o uso 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>

Flexbox suporte: http://caniuse.com/flexbox

A solução mais fácil é seguir:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

Uma maneira moderna para centralizar um elemento vertical seria usar flexbox .

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

O exemplo a seguir irá centralizar uma div para o centro dentro do seu browser. O que é importante (no meu exemplo) é definir height: 100% para body e html e depois min-height: 100% para o seu recipiente.

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 apenas na vertical

Se você não se preocupam com o Internet Explorer 6 e 7, você pode usar uma técnica que envolve dois recipientes.

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 você deseja para a caixa de conteúdo sem se preocupar com a 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 Fiddle !

centragem horizontalmente e verticalmente

Se você deseja centralizar horizontalmente e verticalmente, você também precisa o seguinte.

O recipiente interno:

deve ter text-align: center;

A caixa de conteúdo:

deve reajustar o texto-alinhamento horizontal para, por exemplo, text-align: left; ou text-align: right;, a menos que você deseja que o texto a ser 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 Fiddle !

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Relacionado: Centro de Imagem

Esta é sempre onde eu vou quando tenho de voltar a esta questão .

Para aqueles que não querem fazer o salto:

Especifique o recipiente pai como position:relative ou position:absolute.
Especifique uma altura fixa no recipiente filho.
Set position:absolute e top:50% no recipiente filho para mover a parte superior para baixo para o meio do pai.
Set margin-top: -YY onde aa é a metade da altura do recipiente criança para compensar o item para cima.

Um exemplo disto em 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 só escrevi este CSS e saber mais, por favor, vá através de: Este artigo com vertical do align qualquer coisa com apenas 3 linhas de CSS .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

Usando propriedades de flex de CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

ou usando display: flex; e margin: auto;

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

<div class="parent">
    <div class="child"></div>
</div>

Centro texto espectáculo

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

Usando percentagem (%) de altura e largura.

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

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

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

O link a seguir apresenta uma maneira simples de fazê-lo com apenas 3 linhas em seu CSS:

Vertical align qualquer coisa com apenas 3 linhas de CSS .

Créditos para :. Sebastian Ekström

Eu sei que a questão já tem uma resposta no entanto utilitário vi na ligação para sua simplicidade.

Não responder para a compatibilidade do navegador, mas também para falar da nova grade e os não tão novo recurso Flexbox.

Rede

De: Documentação Grid - - Mozilla div align verticalmente

Suporte Browser: suporte do navegador 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 Browser: suporte do navegador Flexbox

CSS:

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

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

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

Estou adicionando esta resposta desde que eu encontrei alguma imperfeição na versão anterior desta resposta (e estouro de pilha não vai me permitir simplesmente comentário).

'posição' messes parente até o estilo se o div atual é no corpo e não tem div container. No entanto 'fixo' parece funcionar, mas obviamente corrige o conteúdo no centro da janela de visualização
Também eu usei esse estilo para centrar algumas divs sobreposição e descobriu que no Mozilla todos os elementos dentro deste div transformado tinham perdido suas bordas inferiores. Possivelmente um problema de processamento. Mas adicionando apenas o preenchimento mínimo para alguns deles tornaram corretamente. Chrome e Internet Explorer (surpreendentemente), tornou as caixas sem qualquer necessidade de preenchimento

Eu acho que uma solução sólida para todos os navegadores sem usar flexbox - "ALIGN-itens: center;" é uma combinação de exibição: tabela e vertical-align:. meio;

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/

CSS Grade

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

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

I fez com este (largura mudança, altura, margem superior e margem esquerda em conformidade):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

Especialmente para divs-mãe com (desconhecido) altura relativa, o centragem no desconhecido solução funciona muito bem para mim. Existem alguns exemplos de código realmente agradáveis ??no artigo.

Ele 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>

Há um truque que eu descobri recentemente: Você precisa usar top 50% e então você faz um translateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Para recém-chegados Por favor, tente

display: flex;
align-items: center;
justify-content: center;

Eu acho isso mais útil .. dá o layout 'H' mais precisa e é muito simples de entender.

O benefício dessa marcação é que você definir o seu tamanho do conteúdo em um único lugar -> "PageContent".
As cores do fundo da página e suas margens horizontais são definidas em suas divs correspondentes.

<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 CSS separados:

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

O conteúdo pode ser facilmente centrada usando flexbox. Os seguintes mostra o código do CSS para o interior do recipiente, que o conteúdo tem de ser centrada:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

Licenciado em: CC-BY-SA com atribuição

Não afiliado a StackOverflow