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

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

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>

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.

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

• Link 2

• Link 3

• Link 4

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

• Por que o modelo de caixa W3C é considerado melhor?

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

.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 */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Se você precisa oferecer suporte a navegadores mais antigos que usam sintaxe mais antiga para o flexbox, aqui está um bom lugar para procurar.

Se você não deseja definir uma largura fixa e não deseja uma margem extra, adicione display: inline-blockao seu elemento.

Você pode usar:

#element {
    display: table;
    margin: 0 auto;
}

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 .

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.

Propriedade box-align do CSS 3

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

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.

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

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.

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 .

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 !

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>

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>

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;

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

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:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

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.

#inner {
  display: table;
  margin: 0 auto;
}

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

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.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

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

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

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

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

#inner {
  display: inline-block;
}

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

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.

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 heighte widthnã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 */
}