Como centrar verticalmente um div para todos os navegadores?
quero centrar a div
verticalmente com CSS. Não quero mesas nem JavaScript, mas apenas CSS puro. Eu encontrei algumas soluções, mas todos eles estão faltando suporte Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
Como posso centrar um div
verticalmente em todos os navegadores principais, incluindo o Internet Explorer 6?
30 answers
Abaixo encontra-se a melhor solução global que consegui construir para centrar verticalmente e horizontalmente uma caixa de conteúdo de largura fixa, Altura flexível. Ele foi testado e trabalhando para versões recentes do Firefox, Opera, Chrome e Safari.
.outer {
display: table;
position: absolute;
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>
.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;
}
- Navegador cruzado (incluindo Internet Explorer 8-Internet Explorer 10 sem hacks!)
- Resposta com percentagens e min - / max -
- centrado independentemente do enchimento (sem caixa-dimensionamento!)
-
height
deve ser declarado (ver altura variável) - configuração recomendada
overflow: auto
para prevenir a utilização do conteúdo (ver transbordamento)
A maneira mais simples seria a seguinte 3 linhas de CSS:
position: relative;
top: 50%;
transform: translateY(-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>
#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>
.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>
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
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%;
}
body, html{
height:100%;
}
<div class="container">
<div>Div to be aligned vertically</div>
</div>
Para centrar o div numa página, Verifique a ligação 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>
Outra opção é usar a caixa de flex, verifique a ligação de 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 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>
Solução Flexbox
Notas
1. O elemento pai recebe o nome da classe.
2. Adicione prefixos do Fornecedor flex se necessário pelos seus navegadores suportados .
.verticallyCenter {
display: flex;
align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
<div>Element centered vertically</div>
</div>
Para Navegadores compatíveis com normas como Mozilla, Opera, Safari, etc. você precisa definir o div externo para ser mostrado como uma tabela e o div interior para ser mostrado como uma célula de tabela -que pode então ser centrado verticalmente. Para Internet Explorer, você precisa posição o mergulhador interior absolutamente dentro do div exterior e depois especificar o topo como 50%. As páginas seguintes explicam bem esta técnica e fornecem algumas amostras de código também:
- centro Vertical em CSS
-
centralização Vertical em CSS de altura desconhecida (compatível com o Internet Explorer 7)(já não vivo) - centralização Vertical em CSS com altura desconhecida (Internet Explorer 7 compatível) (artigo arquivado cortesia da máquina Wayback)
Existe também uma técnica para fazer a centralização vertical usando JavaScript. O alinhamento Vertical do conteúdo com JavaScript & CSS demonstra-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>
flexbox
.
Precisas de um pai para decidir a altura e uma criança para se centrarem.
O exemplo abaixo irá centrar um div para o centro dentro do seu navegador. 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>
.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: centrar uma imagem
Centrando-se apenas verticalmente
Se você não se importa com o Internet Explorer 6 e 7, você pode usar uma técnica que envolve dois contêineres.O recipiente exterior:
- devia ter
display: table;
O recipiente interior:
- devia ter
display: table-cell;
- devia ter
vertical-align: middle;
A caixa de conteúdo:
- devia ter
display: inline-block;
Você pode adicionar qualquer conteúdo que quiser à caixa de conteúdo sem cuidado 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>
Ver também Este Violino!
Centralizar horizontalmente e verticalmente
Se quiser centrar-se tanto na horizontal como na vertical, também precisa do seguinte.
O recipiente interior:
- devia ter
text-align: center;
A caixa de conteúdo:
- deve reajustar o texto horizontal-alinhamento por exemplo
text-align: left;
outext-align: right;
, a menos que 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>
Ver também Este Violino!
A solução mais fácil está em baixo:
.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>
- especifique o contentor inicial como
position:relative
ouposition:absolute
. - especifique uma altura fixa no recipiente para crianças.
- Definir
position:absolute
etop:50%
no recipiente para crianças para mover a parte de cima para baixo para o meio do Pai. - definir margem-topo: - yy onde yy é metade da altura do recipiente para crianças para compensar o item.
Um exemplo disto 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>
Acabei de escrever este CSS e para saber mais, por favor, passe por: Este artigo com alinhamento vertical qualquer coisa com apenas 3 linhas de CSS.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
O seguinte link apresenta uma forma simples de o fazer com apenas 3 linhas no seu CSS:
Alinhar Vertical qualquer coisa com apenas 3 linhas de CSS .
Sei que a pergunta já tem uma resposta, mas vi utilidade no link pela sua simplicidade.Créditos a: Sebastian Ekström .
A resposta do Billbad só funciona com uma largura fixa do .inner
div.
Esta solução funciona para uma largura dinâmica adicionando o atributo text-align: center
ao .outer
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>
As três linhas de código que usam 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%);
}
Estou adicionando esta resposta já que encontrei alguma incompletude na versão anterior desta resposta (e Stack Overflow não me permite comentar simplesmente).
'a posição' relativa confunde o estilo se o div atual estiver no corpo e não tiver nenhum div container. No entanto "fixo" parece funcionar, mas obviamente fixa o conteúdo no centro do visor
Também usei este estilo para centrar algumas divs sobrepostas e descobri que no Mozilla todos os elementos dentro deste div transformado tinham perdido as suas fronteiras inferiores. Possivelmente um problema de renderização. Mas adicionando apenas o preenchimento mínimo a alguns deles rendeu-o corretamente. Chrome e Internet Explorer (surpreendentemente) renderam as caixas sem qualquer necessidade de enchimento
Fi-lo com isto (mudar a largura, a altura, a margem-superior e a 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>
Não responder pela compatibilidade do navegador, mas também mencionar a nova grelha e a funcionalidade Flexbox não tão nova.
Grelha
From: Mozilla-Grid Documentation-Align Div Verticalmente
Suporte Do Navegador: Suporte Do Navegador Da Grelha
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 Do Navegador: 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;
Especialmente para divs progenitores com altura relativa (desconhecida), a concentração na solução desconhecida funciona muito bem para mim. Há alguns exemplos de código muito bons no artigo.
Foi testado em 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>
Eu acho que uma solução sólida para todos os navegadores sem usar flexbox - "alinhar-itens: centro;" é uma combinação de display: 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 demo: https://jsfiddle.net/6m640rpp/
O benefício nesta marcação é que você define o seu tamanho de 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 centrado usando flexbox. O seguinte código mostra o CSS para o recipiente dentro do qual o conteúdo precisa ser centrado:
.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;
}
Esta solução funcionou para mim se tiver um elemento de bloco (p. ex.). 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;
}
height:268px
- para display:table
age como a altura mínima.
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>
div
:
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
E ler este artigo para uma explicação. Nota: Height
é necessário.
O seguinte está a funcionar 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 dos pais são dinâmicas. Eu uso - o quando há outros elementos no mesmo pai que é maior do que o elemento alvo, onde ambos são posicionados horizontalmente em linha.