Como centralizar horizontalmente um <div>


4287

Como centralizar horizontalmente um <div>dentro de outro <div>usando CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

13
Dessas ótimas respostas, quero apenas destacar que você deve dar ao "#inner" uma "largura", ou será "100%", e você não pode dizer se já está centrado.
Jony

Joma Tech me trouxe aqui
Barbu Barbu

@Barbu Barbu: De que maneira? Em que contexto?
Peter Mortensen

Respostas:


4726

Você pode aplicar esse CSS ao interior <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Claro, você não precisa definir o widthpara 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>


12
Para a centralização vertical, costumo usar "altura da linha" (altura da linha == altura). Isso é simples e agradável, mas está funcionando apenas com um texto de conteúdo de uma linha :) #
Nicolas Guillaume

98
Você precisa usar a tag! DOCTYPE na sua página html para fazê-la funcionar bem no IE.
Fabio

15
Observe que pode ser necessário adicionar "float: none;" para o #inner.
Mert Mertce

15
Você também define as margens superior e inferior como 0, o que não é relacionado. Melhor colocar margin-left: auto; margin-right: autoeu acho.
Emmanuel Touzery

13
Não necessariamente margin:0 auto: pode ser o margin: <whatever_vertical_margin_you_need> autosegundo na margem horizontal.
YakovL

1247

Se você não deseja definir uma largura fixa no interior, divpode 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 divem um elemento inline que pode ser centralizado text-align.


13
@SabaAhang, a sintaxe correta para isso seria float: none;e provavelmente é necessária apenas porque #inner herdou um floatde um leftou rightde outro lugar no seu CSS.
Doug McLean

8
Esta é uma boa solução. Basta ter em mente que interior herdarão text-alignassim que você pode querer definir do interior text-alignpara initialou algum outro valor.
pmoleri

boa solução eu acho que sim #
1140 simon

381

As melhores abordagens são no CSS 3 .

Modelo de caixa:

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

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Leia mais sobre centralizar os elementos filho

E isso explica por que o modelo de caixa é a melhor abordagem :


25
Leia esta resposta primeiro antes de implementar esta solução.
Cimmanon

4
Safari, a partir de agora, ainda requer -webkitbandeiras para flexbox ( display: -webkit-flex;e -webkit-align-items: center;e -webkit-justify-content: center;)
Joseph Hansen

Eu sempre acho que usar código de lotes é uma prática ruim, por exemplo, com esse código eu centralizo minha div: display: table; margem: auto; simples e fácil
simon

Sou eu ou esse trecho de código não está centralizado
Mike

Em 2020, podemos usar o flexbox caniuse.com/#feat=flexbox
tonygatta

251

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.


Não gosto dessa solução, porque quando o elemento interno é muito amplo para a tela, você não pode rolar o elemento inteiro horizontalmente. margem: 0 auto funciona melhor.
Aloso

margem esquerda: auto; margem direita: auto; Centros um elemento nível de bloco
killscreen

A largura padrão para a maioria dos elementos no nível do bloco é automática, o que preenche a área disponível na tela. Apenas sendo centralizado, coloca-o na mesma posição que o alinhamento esquerdo. Se você deseja que seja centralizado visualmente, defina uma largura (ou uma largura máxima, embora o Internet Explorer 6 e versões anteriores não ofereçam suporte a isso, e o IE 7 somente o suporte no modo padrão).
Killscreen #

228

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 centermesmo quando você redimensionar sua tela.


12
+1 para esse método, eu estava prestes a responder. Observe que você deve declarar uma largura no elemento que deseja centralizar horizontalmente (ou altura, se centralizar verticalmente). Aqui está uma explicação abrangente: codepen.io/shshaw/full/gEiDt . Um dos métodos mais versáteis e amplamente suportados de centralizar elementos na vertical e / ou na horizontal.
stvnrynlds

6
Você não pode usar preenchimento dentro da div, mas se quiser dar a ilusão, use uma borda da mesma cor.
Squirrl 9/07

Eu acho que para que esse método funcione, você precisa definir o com e altura de div interna
Nicolas S.Xu

212

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.


o que você quer dizer com "sintaxe desatualizada", está obsoleta?
21413 Konga Raju

6
A especificação Flexbox passou por três grandes revisões. O rascunho mais recente é de setembro de 2012, que obsoleta oficialmente todos os rascunhos anteriores. No entanto, o suporte ao navegador é irregular (particularmente antigos navegadores Android): stackoverflow.com/questions/15662578/...
cimmanon

Isso funcionou para mim no Chrome quando a versão de Justin Poliey não.
Vern Jensen

Não é o "justify-content: center"; para o alinhamento vertical e os "alinhar itens: centro;" para o alinhamento horizontal?
Wouter Vanherck 22/03

3
@WouterVanherck depende do flex-directionvalor. 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.
22617 Danield


97

Centralizando uma div de altura e largura desconhecidas

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>

Mexa mais no Codepen ou no JSBin .


89

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.


49
e se você não sabe a largura? Digamos porque o conteúdo é dinâmico?
gman

largura máxima? Que tal?

1
Eu uso width: fit-content;e margin: 0 auto. Eu acho que isso pode funcionar com largura desconhecida.
Rick


88

Defina widthe defina margin-lefte margin-rightpara 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.


62

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>


59

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.


Isso pode não funcionar se você tiver outras divs abaixo da div centralizada.
NoChance

54

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.


5
Não há necessidade de propriedade de alinhamento de texto. É completamente desnecessário.
Touhid Rahman

o alinhamento de texto é realmente necessário para que ele funcione no modo rápido do IE, portanto, se você não se importa em adicionar uma pequena expressão para dar suporte a navegadores antigos, mantenha-a lá. (IE8 com IE8 regras e IE7 governa tanto trabalho sem text-align, então pode ser que seja apenas IE6 e mais velhos que estão em causa)
heytools

52

Usar:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>


47

Outra solução para isso sem precisar definir uma largura para um dos elementos é usar o transformatributo CSS 3 .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

O truque é que translateX(-50%)define o #innerelemento 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 .


2
Um pode precisar de prefixos de fornecedores, bem como:-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);
Skippy le Grand Gourou

45

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

39

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.


Basta definir esta regra para #innerapenas: #inner { position:relative; left:50%; transform:translateX(-50%); }. Isso funciona para qualquer largura.
Jose Rui Santos

33

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 .


28

Centralizando apenas horizontalmente

Na minha experiência, a melhor maneira de centralizar uma caixa horizontalmente é aplicar as seguintes propriedades:

O contêiner:

  • deveria text-align: center;

A caixa de conteúdo:

  • deveria display: inline-block;

Demo:

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


Centrar horizontalmente e verticalmente

Na minha experiência, a melhor maneira de centralizar uma caixa tanto verticalmente e horizontalmente é usar um recipiente adicional e aplicar as seguintes propriedades:

O recipiente externo:

  • deveria display: table;

O recipiente interno:

  • deveria display: table-cell;
  • deveria vertical-align: middle;
  • deveria text-align: center;

A caixa de conteúdo:

  • deveria display: inline-block;

Demo:

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


27

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>


1
Como observa o violino, o #inner precisa ter uma largura definida.
Michael Terry

#outernão precisa de nenhum, width:100%;como <div>sempre o padrão width:100%. e text-align:centertambém não é necessário.
Mobarak Ali

27

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:

  1. Enrole .innerdentro.center-helper
  2. Faça .center-helperum bloco embutido; torna-se do mesmo tamanho .innerque a largura de 300 pixels.
  3. Empurre .center-helper50% para a direita em relação ao pai; isso coloca sua esquerda em 500 pixels wrt. exterior.
  4. Empurre .inner50% 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.
  5. Defina o estouro .outercomo 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>


26

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 #innervertical. Se você não quiser, remova as propriedades displaye vertical-align;


25

Aqui está o que você deseja da maneira mais curta.

JSFIDDLE

#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 % );
}

3
Isso centraliza verticalmente.
Michael Terry

22

Alinhar texto: centro

A aplicação text-align: centerdo 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:


Margem: 0 automático

O uso margin: 0 autoé outra opção e é mais adequado para compatibilidade com navegadores antigos. Trabalha junto com display: table.


Flexbox

display: flexse 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.


Transformar

transform: translatepermite 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: absolutee 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.


22

Você pode usar display: flexpara 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.


21

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

21

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

21

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 heighte widthnão devem ser maiores do que os do seu recipiente.


19

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 */
}

trabalho de alinhamento de texto para alinhamento de texto em seu contêiner, não para seu contêiner com seu pai.
Lalit Kumar Maurya

Eu testei, eu problema com definir filho para centralizar, quando você tiver mais um filho, mais vezes margem: 0 resposta automática de fonte, mas, centro de alinhamento de texto, para o pai, faça com que esse filho seja o centro, mesmo que sejam elemento e não seja texto, teste e veja o que acontece
Pnsadeghy

alinhar texto somente o texto central. Você está certo neste momento, mas quando escreve um container CSS que contém um filho com largura e cor diferentes, seu código não funciona. Teste novamente !!!!
Lalit Kumar Maurya

Veja este exemplo jsfiddle.net/uCdPK/2 e me diga o que você acha disso !!!!!
Lalit Kumar Maurya
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.