Como centralizar horizontalmente um <div>
dentro de outro <div>
usando CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Como centralizar horizontalmente um <div>
dentro de outro <div>
usando CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Respostas:
Você pode aplicar esse CSS ao interior <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Claro, você não precisa definir o width
para 50%
. Qualquer largura menor que a que contenha <div>
funcionará. O margin: 0 auto
é o que faz a centralização real.
Se você estiver segmentando o Internet Explorer 8 (e posterior), talvez seja melhor ter isso:
#inner {
display: table;
margin: 0 auto;
}
Ele fará o elemento interno centralizar horizontalmente e funcionará sem definir um específico width
.
Exemplo de trabalho aqui:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
margin-left: auto; margin-right: auto
eu acho.
margin:0 auto
: pode ser o margin: <whatever_vertical_margin_you_need> auto
segundo na margem horizontal.
Se você não deseja definir uma largura fixa no interior, div
pode fazer algo assim:
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Isso transforma o interior div
em um elemento inline que pode ser centralizado text-align
.
float: none;
e provavelmente é necessária apenas porque #inner herdou um float
de um left
ou right
de outro lugar no seu CSS.
text-align
assim que você pode querer definir do interior text-align
para initial
ou algum outro valor.
As melhores abordagens são no CSS 3 .
#outer {
width: 100%;
/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;
/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
/* W3C */
display: box;
box-pack: center;
box-align: center;
}
#inner {
width: 50%;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
De acordo com a sua usabilidade, você também pode usar as box-orient, box-flex, box-direction
propriedades.
Flex :
#outer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
E isso explica por que o modelo de caixa é a melhor abordagem :
-webkit
bandeiras para flexbox ( display: -webkit-flex;
e -webkit-align-items: center;
e -webkit-justify-content: center;
)
Suponha que sua div tenha 200 pixels de largura:
.centered {
position: absolute;
left: 50%;
margin-left: -100px;
}
Verifique se o elemento pai está posicionado , ou seja, relativo, fixo, absoluto ou adesivo.
Se você não souber a largura da sua div, poderá usar em transform:translateX(-50%);
vez da margem negativa.
https://jsfiddle.net/gjvfxxdj/
Com CSS calc () , o código pode ficar ainda mais simples:
.centered {
width: 200px;
position: absolute;
left: calc(50% - 100px);
}
O princípio ainda é o mesmo; coloque o item no meio e compense a largura.
Eu criei este exemplo para mostrar como verticalmente e horizontalmente align
.
O código é basicamente este:
#outer {
position: relative;
}
e...
#inner {
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
}
E ele permanecerá no center
mesmo quando você redimensionar sua tela.
Alguns pôsteres mencionaram a maneira CSS 3 de centralizar o uso display:box
.
Essa sintaxe está desatualizada e não deve mais ser usada. [Veja também este post] .
Portanto, apenas para completar, aqui está a maneira mais recente de centralizar no CSS 3 usando o Módulo de layout de caixa flexível .
Portanto, se você tem uma marcação simples como:
<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>
... e você deseja centralizar seus itens dentro da caixa, eis o que você precisa no elemento pai (.box):
.box {
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Se você precisa oferecer suporte a navegadores mais antigos que usam sintaxe mais antiga para o flexbox, aqui está um bom lugar para procurar.
flex-direction
valor. Se for 'linha' (o padrão) - então justify-content: center;
é para o alinhamento horizontal (como mencionei na resposta) Se for 'coluna' - então justify-content: center;
é para o alinhamento vertical.
Se você não deseja definir uma largura fixa e não deseja uma margem extra, adicione display: inline-block
ao seu elemento.
Você pode usar:
#element {
display: table;
margin: 0 auto;
}
display: table;
antes. O que isso faz?
Horizontalmente e verticalmente. Funciona com navegadores razoavelmente modernos (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, etc.)
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>
Não pode ser centralizado se você não especificar uma largura. Caso contrário, será necessário, por padrão, todo o espaço horizontal.
width: fit-content;
e margin: 0 auto
. Eu acho que isso pode funcionar com largura desconhecida.
Propriedade box-align do CSS 3
#outer {
width: 100%;
height: 100%;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
Defina width
e defina margin-left
e margin-right
para auto
. Isso é apenas para horizontal , no entanto. Se você quer os dois lados, basta fazê-lo. Não tenha medo de experimentar; não é como se você quebrasse alguma coisa.
Recentemente, tive que centralizar uma div "oculta" (ou seja, display:none;
) que continha uma forma de tabela que precisava ser centralizada na página. Eu escrevi o seguinte código jQuery para exibir a div oculta e, em seguida, atualize o conteúdo CSS para a largura gerada automaticamente da tabela e altere a margem para centralizá-la. (A alternância de exibição é acionada ao clicar em um link, mas esse código não era necessário para exibição.)
NOTA: Estou compartilhando esse código, porque o Google me levou a esta solução Stack Overflow e tudo teria funcionado, exceto que os elementos ocultos não têm largura e não podem ser redimensionados / centralizados até serem exibidos.
$(function(){
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>
O jeito que eu costumo fazer isso é usar posição absoluta:
#inner{
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;
}
A div externa não precisa de propriedades extras para que isso funcione.
Para Firefox e Chrome:
<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>
Para Internet Explorer, Firefox e Chrome:
<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>
A text-align:
propriedade é opcional para navegadores modernos, mas é necessária no Modo Quirks do Internet Explorer para suporte a navegadores herdados.
Usar:
#outerDiv {
width: 500px;
}
#innerDiv {
width: 200px;
margin: 0 auto;
}
<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>
Outra solução para isso sem precisar definir uma largura para um dos elementos é usar o transform
atributo CSS 3 .
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
O truque é que translateX(-50%)
define o #inner
elemento 50% para a esquerda de sua própria largura. Você pode usar o mesmo truque para alinhamento vertical.
Aqui está um violino mostrando o alinhamento horizontal e vertical.
Mais informações estão na Mozilla Developer Network .
-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Chris Coyier, que escreveu um excelente post sobre 'Centrando no desconhecido' em seu blog. É um resumo de várias soluções. Publiquei um que não foi publicado nesta pergunta. Ele tem mais suporte ao navegador do que a solução Flexbox , e você não está usando o display: table;
que poderia quebrar outras coisas.
/* This parent can be any width and height */
.outer {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.outer:before {
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
overflow: hidden;
}
/* The element to be centered, can
also be of any width and height */
.inner {
display: inline-block;
vertical-align: middle;
width: 300px;
}
Eu encontrei recentemente uma abordagem:
#outer {
position: absolute;
left: 50%;
}
#inner {
position: relative;
left: -50%;
}
Ambos os elementos devem ter a mesma largura para funcionar corretamente.
#inner
apenas: #inner { position:relative; left:50%; transform:translateX(-50%); }
. Isso funciona para qualquer largura.
Por exemplo, consulte este link e o snippet abaixo:
div#outer {
height: 120px;
background-color: red;
}
div#inner {
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>
Se você tem muitos filhos sob os pais, seu conteúdo CSS deve ser como este exemplo no Fiddle .
A aparência do conteúdo HTML é assim:
<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>
Então veja este exemplo no violino .
Na minha experiência, a melhor maneira de centralizar uma caixa horizontalmente é aplicar as seguintes propriedades:
text-align: center;
display: inline-block;
.container {
width: 100%;
height: 120px;
background: #CCC;
text-align: center;
}
.centered-content {
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;
}
<div class="container">
<div class="centered-content">
Center this!
</div>
</div>
Veja também este violino !
Na minha experiência, a melhor maneira de centralizar uma caixa tanto verticalmente e horizontalmente é usar um recipiente adicional e aplicar as seguintes propriedades:
display: table;
display: table-cell;
vertical-align: middle;
text-align: center;
display: inline-block;
.outer-container {
display: table;
width: 100%;
height: 120px;
background: #CCC;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.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">
Center this!
</div>
</div>
</div>
Veja também este violino !
O jeito mais fácil:
#outer {
width: 100%;
text-align: center;
}
#inner {
margin: auto;
width: 200px;
}
<div id="outer">
<div id="inner">Blabla</div>
</div>
#outer
não precisa de nenhum, width:100%;
como <div>
sempre o padrão width:100%
. e text-align:center
também não é necessário.
Se a largura do conteúdo for desconhecida, você pode usar o seguinte método . Suponha que tenhamos esses dois elementos:
.outer
-- largura completa.inner
- nenhuma largura definida (mas uma largura máxima pode ser especificada)Suponha que a largura calculada dos elementos seja de 1000 pixels e 300 pixels, respectivamente. Proceda da seguinte forma:
.inner
dentro.center-helper
.center-helper
um bloco embutido; torna-se do mesmo tamanho .inner
que a largura de 300 pixels..center-helper
50% para a direita em relação ao pai; isso coloca sua esquerda em 500 pixels wrt. exterior..inner
50% para a esquerda em relação ao pai; isso coloca sua esquerda em -150 pixels wrt. auxiliar central, o que significa que sua esquerda está entre 500 - 150 = 350 pixels wrt. exterior..outer
como oculto para impedir a barra de rolagem horizontal.Demo:
body {
font: medium sans-serif;
}
.outer {
overflow: hidden;
background-color: papayawhip;
}
.center-helper {
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;
}
.inner {
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;
}
<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>
Você pode fazer algo assim
#container {
display: table;
width: <width of your container>;
height: <height of your container>;
}
#inner {
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
Isso também alinhará a #inner
vertical. Se você não quiser, remova as propriedades display
e vertical-align
;
Aqui está o que você deseja da maneira mais curta.
#outer {
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;
}
#inner {
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );
}
A aplicação text-align: center
do conteúdo embutido é centralizada na caixa de linha. No entanto, como a div interna tem por padrão, width: 100%
você deve definir uma largura específica ou usar um dos seguintes:
O uso margin: 0 auto
é outra opção e é mais adequado para compatibilidade com navegadores antigos. Trabalha junto com display: table
.
display: flex
se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo flexbox. Trabalha com justify-content: center
.
Observação: o Flexbox é compatível com a maioria dos navegadores, mas não com todos. Veja aqui uma lista completa e atualizada de compatibilidade de navegadores.
transform: translate
permite modificar o espaço de coordenadas do modelo de formatação visual CSS. Utilizando-o, os elementos podem ser traduzidos, girados, redimensionados e inclinados. Para centralizar horizontalmente, é necessário position: absolute
e left: 50%
.
<center>
(Descontinuada)A tag <center>
é a alternativa em HTML para text-align: center
. Ele funciona em navegadores mais antigos e na maioria dos novos, mas não é considerado uma boa prática, pois esse recurso é obsoleto e foi removido dos padrões da Web.
Você pode usar display: flex
para sua div externa e para centralizar horizontalmente você deve adicionarjustify-content: center
#outer{
display: flex;
justify-content: center;
}
ou você pode visitar w3schools - CSS flex Property para obter mais idéias.
O Flex tem mais de 97% de cobertura de suporte ao navegador e pode ser a melhor maneira de resolver esses tipos de problemas em poucas linhas:
#outer {
display: flex;
justify-content: center;
}
Bem, consegui encontrar uma solução que talvez sirva para todas as situações, mas use JavaScript:
Aqui está a estrutura:
<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>
E aqui está o trecho de JavaScript:
$(document).ready(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Se você quiser usá-lo em uma abordagem responsiva, poderá adicionar o seguinte:
$(window).resize(function() {
$('.container .content').each( function() {
container = $(this).closest('.container');
content = $(this);
containerHeight = container.height();
contentHeight = content.height();
margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
})
});
Este método também funciona bem:
div.container {
display: flex;
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */
}
Para o interior <div>
, a única condição é que a sua height
e width
não devem ser maiores do que os do seu recipiente.
Existe uma opção que eu encontrei:
Todo mundo diz para usar:
margin: auto 0;
Mas há outra opção. Defina esta propriedade para a div principal. Funciona perfeitamente a qualquer momento:
text-align: center;
E veja, criança vai para o centro.
E, finalmente, CSS para você:
#outer{
text-align: center;
display: block; /* Or inline-block - base on your need */
}
#inner
{
position: relative;
margin: 0 auto; /* It is good to be */
}