Como centralizar verticalmente uma div para todos os navegadores?

1367

Quero centralizar divverticalmente com CSS. Não quero tabelas ou JavaScript, mas apenas CSS puro. Encontrei algumas soluções, mas todas estão sem suporte para o Internet Explorer 6.

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

Como posso centralizar um divverticalmente em todos os principais navegadores, incluindo o Internet Explorer 6?

css cross-browser alignment vertical-alignment centering

— Burak Erdem
fonte

25

@MarcoDemaio As pessoas não desaprovam constantemente os tableslayouts aqui?

— precisa saber é o seguinte

14

@ Chud37: depende do que você precisa fazer, as tabelas para o layout geralmente não são versáteis e demoram para digitar o código, com o css você pode facilmente mudar um layout de 2 colunas para um layout de 3/4 de sol, etc. Mas neste caso é diferente: usar dezenas de dicas e truques de CSS para uma tarefa tão simples que poderia ser realizada com uma tabela perfeita entre navegadores, é como tentar entrar em sua casa pela janela em vez de usar a porta.

— Marco Demaio

Caso as pessoas não se importem com o suporte a navegadores antigos: davidwalsh.name/css-vertical-center #

— Karolis Šarapnickis

1

css-vertical-center.com existem algumas soluções com informações de compatibilidade do navegador

— EscapeNetscape

2

Aqui é muitas maneiras de fazer isso css-tricks.com/centering-css-complete-guide

— Michael Yurin

Respostas:

1374

Abaixo está a melhor solução geral que eu poderia criar para centralizar vertical e horizontalmente uma caixa de conteúdo de altura fixa e largura fixa . Foi testado e está funcionando para 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>

Expandir snippet

Veja um exemplo de trabalho com conteúdo dinâmico

Eu construí um conteúdo dinâmico para testar a flexibilidade e gostaria de saber se alguém vê algum problema com ele. Também deve funcionar bem para sobreposições centralizadas - mesa de luz, pop-up etc.

— Billbad
fonte

Sem uma DIV externa "absoluta", qualquer conteúdo da página anterior empurrará o bloco inteiro para baixo. Isso o torna mais independente de outro conteúdo da página.

— Billbad 03/04

9

.outer {position:absolute;width:100%;height:100%}não é necessário, eles estão aqui simplesmente para demonstrar. Tudo o que precisamos é display:tablese alguém está confuso como eu.

— Gfaceless #

Notei que isso precisa de 99% para evitar barras de rolagem. Mais importante, isso funciona apenas com os dois primeiros divs, digamos keep .outere middleignora claramente o .innerestilo. Não sei qual é o objetivo de margin-left, margin-rightdefinido como automático, pois isso não centraliza o elemento horizontalmente ?? !!!

— user10089632

A remoção width: 100%;e adicionando margin: 0 autoa .outerpermite largura variável bem.

— rococo

@ user10089632 Não, não se trata de largura ou altura, mas de posição. top: 0; left 0;está faltando, pelo menos no Chrome, que define o padrão como 1.

— Michał Woliński

280

Mais um que não consigo 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;
}

Entre navegadores (incluindo o Internet Explorer 8 - Internet Explorer 10 sem hacks!)
Responsivo com porcentagens e mín. / Máx.
Centrado independentemente do preenchimento (sem o tamanho da caixa!)
heightdeve ser declarado (consulte Altura variável )
Configuração recomendada overflow: autopara impedir a propagação de conteúdo (consulte Estouro)

_{Fonte: Centralização horizontal e vertical absoluta em CSS}

— Yisela
fonte

7

Isso funcionou para mim, mas eu precisava ter uma largura fixa e altura em cromo por algum motivo

— Ryan Knell

1

Obrigado. Eu precisava de uma correção na qual não precisasse calcular a altura ou largura do px e isso funcionou perfeitamente.

— GFoley83 14/05

8

Grande solução, especialmente porque você não precisa de um div pai

— Luca Steeb

1

Isso faz um alongamento se a altura não for fixa, exceto a seguinte: boa solução #

— 2255 Bart Burg Bart

Se você tem uma largura e altura que não são 100%, o usomargin: auto;

— Charles L.

253

A maneira mais simples seria as seguintes 3 linhas de CSS:

1) posição: relativa;

2) topo: 50%;

3) transformar: traduzirY (-50%);

A seguir está 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>

Expandir snippet

— DrupalFever
fonte

4

nota: não funciona correto, se a altura da div externa é definida com "min-height: 170px"

— Bart Burg

3

Interfere com o índice z

— ripper234

4

não funciona quando heightdo exterior divé 100%. Então só funciona com position: absolute;.

— Arch Linux Tux

1

Eu encontrei essa solução em outro lugar primeiro, mas parabéns extras a essa resposta específica por mencionar a -webkit-transformvariante em particular, que eu precisava para fazer esse método funcionar em phantomjs ... terminou horas de luta, então muito obrigado!

— Drmrbrewer 23/10

2

Esta é a melhor resposta. Isso é incrivelmente simples, mexe com a menor quantidade de trabalho e funções existentes em tudo, desde o IE9, que ninguém mais usa. Vamos dar a esse cara mais votos positivos!

— Nick Steele

136

Na verdade, você precisa de duas divs para centralização vertical. A 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>

Expandir snippet

Aqui está o resultado

— Vadim Ovchinnikov
fonte

4

é um velho truque ... top 50% e o negativo margem superior a metade da altura para o div interna

— Manatax

34

está assumindo que você tem uma altura fixa para div. não funciona quando div pode mudar de altura.

— Andre Figueiredo

116

Agora, a solução flexbox é uma maneira muito fácil para 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>

Expandir snippet

— Santosh Khalse
fonte

1

Se você tiver um navbar, você pode ajustar a altura usando height: calc(100% - 55px)ou qualquer que seja a sua altura navbar.

— Adrian

Eu também tive que remover margens / estofamento do corpo

— Ben

Funciona bem com float. Obrigado.

— Amir A. Shabani

Observe que isso pode se comportar de maneira estranha nos navegadores de safari para celular "mais recentes". O uso recomendado em vez de altura é flex-base sobre a classe .container

— Nove Magics

78

Editar 2020: use isso somente se precisar oferecer suporte a navegadores antigos como o IE8 (que você deve recusar a fazer). Caso contrário, use o flexbox.

Este é o método mais simples que encontrei e o uso o tempo todo ( demonstração do jsFiddle aqui )

Obrigado Chris Coyier de CSS Tricks por 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>

Expandir snippet

O suporte começa com o IE8.

— Armel Larcier
fonte

Recusando o suporte a navegadores antigos, a solução para mim não foi o flexbox, mas o sistema de grade. Foi um pouco chato para mim centralizar o conteúdo em um contêiner que, quando fica pequeno demais, precisava mostrar a barra de rolagem, e o conteúdo centralizado estava perdendo a área de rolagem com todos os outros métodos. No contêiner, eu apenas uso: {display: grid; alinhar itens: centro; } Espero que isso ajude alguém.

— tomasofen

63

Depois de muita pesquisa, finalmente encontrei a solução definitiva. Funciona mesmo para elementos flutuantes. Exibir fonte

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

— ymakux
fonte

4

Isso funciona muito bem, desde que você lembre-se de que o elemento container deve ter uma altura implícita ou explícita; jsfiddle.net/14kt53un Uma pequena dica para aqueles que são relativamente novos em CSS.

— Martyn Shutt

6

De todas as respostas, essa é a mais simples! Espero que outros vejam sua resposta também! Obrigado! By the way, 50%trabalhou para mim (não -50%)

— A Codesee

Isso foi incrível. Após horas de pesquisa, este funcionou para mim. Eu tive que usar o translateY (50%). Tenho certeza do porquê, mas funcionou. No meu caso, o pai foi criado pelo AEM Forms Engine e só posso controlar certos elementos filhos.

— tarekahf

41

Solução Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

Expandir snippet

— Reggie Pinkham
fonte

3

Nota justify-content: centercentrará itens horizontalmente bem

— Peter Berg

36

Para centralizar a div em uma página, verifique o link do violino .

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

Expandir snippet

Outra opção é usar a caixa flexível, verifique o link do violino .

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

Expandir snippet

Outra opção é usar uma transformação CSS 3:

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

Expandir snippet

— Nerdroid
fonte

3

@ArmelLarcier Isso está incorreto. Unidades relativas são percentagens %, ems e rems. Valores absolutos ou fixos são pixels ou pontos. O que você está se referindo é "ele funciona apenas com uma altura declarada". No entanto, embora esse método descrito por Moes exija uma altura, quando você o declara em unidades relativas, a porcentagem é a melhor, não importa quanto conteúdo esteja dentro do DIV centralizado que o DIV se expandirá verticalmente para se ajustar ao seu conteúdo. Essa é a beleza desse método. A outra coisa boa é que esse método funciona no IE8 / 9/10, caso alguém ainda precise oferecer suporte a esses navegadores.

— Ricardo Zea

@ricardozea Não quero ser teimoso, mas dizer que o div centrado se expandirá verticalmente enquanto permanecer verticalmente centrado está errado. Tente. Eu sei que quando digo que a altura deve ser "fixa", que não é a palavra certa. É de fato relativo, ao seu pai. De qualquer forma, acho que o método de Chris Coyer faz mais sentido, veja minha resposta stackoverflow.com/a/21919578/1491212 É compatível com o IE8 AND funciona em um elemento sem dimensões especificadas.

— Armel Larcier

1

@ArmelLarcier Está tudo bem. Não está errado irmão. Experimente: codepen.io/shshaw/pen/gEiDt - Adicione parágrafos à caixa verde;]. Concedido, ele usa Modernizr para realizar o efeito, mas apesar de tudo é factível. Vi sua resposta e a postagem CSS-Tricks.com também, mas esse método não me deixa feliz, ele usa marcação extra e o CSS é muito detalhado. Eu acho que a melhor solução é usar o flexbox ou a transform: translate(-50%, -50%);técnica. Para o IE8, eu apenas deixava o topo / centro alinhados e seguia em frente.

— Ricardo Zea

1

@ricardozea Bem, o codepen ao qual você vinculou usa o método "display: table" e marcação extra, então não estou surpreso. De qualquer forma, marque com +1 a sua última frase.

— Armel Larcier

23

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

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

Expandir snippet

— Varsha Dhadge
fonte

2

De fato, o mais fácil até agora :) Embora eu tenha que definir os estilos como div externo, em vez de corpo.

— Baburao

21

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

Para navegadores compatíveis com padrões como Mozilla, Opera, Safari, etc., é necessário definir a div externa para ser exibida como uma tabela e a div interna para ser exibida como uma célula da tabela - que pode ser centralizada verticalmente. Para o Internet Explorer, você precisa posicionar a div interna absolutamente dentro da div externa e depois 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:

Centralização vertical em CSS
~~Centralização vertical em CSS com altura desconhecida (compatível com Internet Explorer 7)~~ (não está mais ativo)
Centralização vertical em CSS com altura desconhecida (compatível com Internet Explorer 7) (artigo arquivado, cortesia da Wayback Machine)

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

— sids
fonte

20

Se alguém se importa apenas com o Internet Explorer 10 (e posterior), use 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>

Expandir snippet

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

— bravedick
fonte

O Android <4.4 não suporta align-items: center;!

— André Fiedler

Na verdade, ele suporta alinhar itens: centro; caniuse.com/#search=align-items

— t.mikael.d

@ t.mikael.d Você pode dar uma olhada mais de perto nessa tabela. Para o Android <4.4, ele afirma "Somente suporta a especificação antiga do flexbox e não suporta quebra automática".

— Nathan Osman

15

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

Você precisa de um pai para decidir a altura e um filho para o centro.

O exemplo abaixo centralizará uma div no centro do seu navegador. O que é importante (no meu exemplo) é definir height: 100%a bodye htmle, em seguida, 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>

Expandir snippet

— Marwelln
fonte

14

Centralizando apenas verticalmente

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

O recipiente externo:

deveria display: table;

O recipiente interno:

deveria display: table-cell;
deveria vertical-align: middle;

A caixa de conteúdo:

deveria display: inline-block;

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

Demo:

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>

Expandir snippet

Veja também este violino !

Centralizando horizontal e verticalmente

Se você deseja centralizar horizontal e verticalmente, também precisa do seguinte.

O recipiente interno:

deveria text-align: center;

A caixa de conteúdo:

reajuste o alinhamento horizontal do texto para, por exemplo , text-align: left;ou text-align: right;, a menos que você queira que o texto seja centralizado

Demo:

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>

Expandir snippet

Veja também este violino !

— John Slegers
fonte

13

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

Expandir snippet

Relacionados: Centralizar uma imagem

— antelove
fonte

10

É sempre aqui que eu vou quando tenho que voltar a esta questão .

Para quem não quer dar o salto:

Especifique o contêiner pai como position:relativeou position:absolute.
Especifique uma altura fixa no contêiner filho.
Defina position:absolutee top:50%no contêiner filho para mover a parte superior para baixo até o meio do pai.
Defina margin-top: -yy onde yy é metade da altura do contêiner filho para compensar o item.

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>

— Ninx
fonte

9

Usando a propriedade flex do 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>

Expandir snippet

ou usando display: flex;emargin: auto;

Mostrar snippet de código

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

Expandir snippet

mostrar centro de texto

Mostrar snippet de código

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

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

Expandir snippet

Usando porcentagem (%) de altura e largura.

Mostrar snippet de código

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

Expandir snippet

— Deepu Reghunath
fonte

8

Acabei de escrever este CSS e, para saber mais, consulte: Este artigo com alinhamento vertical qualquer coisa com apenas 3 linhas de CSS .

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

— Sanjib Debnath
fonte

1

As transformações CSS podem causar distorções no texto e nas bordas (quando a matemática resulta em pixels fracionários).

— Nathan K

5

Grade CSS

body, html { margin: 0; }

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

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

Expandir snippet

— Andy Hoffman
fonte

5

Para recém-chegados, tente

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

— Usman I
fonte

1

Adicione um snippet de pilha mostrando como esse código CSS alinha verticalmente a div.

— Heretic Monkey

isso também funciona # <div style="display:flex"><div style="margin:auto">Inner</div></div>

— idrisadetunmbi 28/06/19

Me deparei com esta maravilhosa explicação de alinhar itens e justificar o conteúdo. Deve ler: stackoverflow.com/questions/42613359/…

— Usman I

4

A resposta de Billbad funciona apenas com uma largura fixa da .innerdiv. Esta solução funciona para uma largura dinâmica, adicionando o atributo text-align: centerà .outerdiv.

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

Expandir snippet

— Ruwen
fonte

Interessante! Estou usando uma técnica quase idêntica! -> stackoverflow.com/questions/396145/…

— John Slegers

4

As três linhas de código usadas transformfuncionam 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%);
}

Estou adicionando esta resposta, pois encontrei alguma incompletude na versão anterior desta resposta (e o Stack Overflow não permitirá que eu simplesmente comente).

O parente 'position' altera o estilo se a div atual estiver no corpo e não tiver uma div de contêiner. No entanto, 'fixo' parece funcionar, mas obviamente corrige o conteúdo no centro da janela de visualização
Também usei esse estilo para centralizar algumas divs de sobreposição e descobri que no Mozilla todos os elementos dessa div transformada haviam perdido suas bordas inferiores. Possivelmente um problema de renderização. Mas adicionar apenas o preenchimento mínimo a alguns deles o renderizou corretamente. O Chrome e o Internet Explorer (surpreendentemente) renderizaram as caixas sem a necessidade de preenchimento

— MandarK
fonte

3

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

Alinhar verticalmente qualquer coisa com apenas 3 linhas de CSS .

Créditos para : Sebastian Ekström .

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

— Hicaro
fonte

3

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

Rede

De: Mozilla - Documentação em grade - Alinhar 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;

— ctekk
fonte

3

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>

Versão: https://jsfiddle.net/6m640rpp/

— Martin Wantke
fonte

2

Fiz isso com isso (altere largura, altura, margem superior e margem esquerda adequadamente):

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

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

— Netuddki
fonte

Isso só é bom se você souber a largura / altura do DIV que está tentando centralizar. Este não é o que a questão está pedindo

— egr103

2

O conteúdo pode ser facilmente centralizado usando o flexbox. O código a seguir mostra o CSS do contêiner no qual o conteúdo precisa ser centralizado:

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

— Mahendra Liya
fonte

2

Especialmente para divs pais com altura relativa (desconhecida), a centralização na solução desconhecida funciona muito bem para mim. Existem alguns exemplos de código muito bons 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>

Expandir snippet

— Ruwen
fonte

2

Apenas faça: Adicione a classe ao seu 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: Heighté necessário.

— Anshul
fonte

2

Há um truque que descobri recentemente: você precisa usar top 50%e depois faz umtranslateY(-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>

Expandir snippet

— Melchia
fonte

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.