Como centro horizontalmente um ?

Question

Como posso centrar horizontalmente a <div> dentro de outro <div> usando CSS?

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

Answer 1

Você pode aplicar este CSS ao <div> interna:

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

Claro, você não tem que definir o width para 50%. Qualquer largura inferior a <div> contendo vai funcionar. O margin: 0 auto é o que faz a centralização real.

Se você está direcionando IE8 +, pode ser melhor ter isso em vez disso:

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

Isso fará com que o centro do elemento interior horizontal e funciona sem definir uma width específico.

Exemplo de aplicação 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>

Answer 2

Se você não quiser definir uma largura fixa no div interior que você poderia fazer algo parecido com isto:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

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

Isso faz com que o div interno em um elemento inline que podem ser centrado com text-align.

Answer 3

Os melhores abordagens são com CSS 3 .

modelo Box:

#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 propriedades box-orient, box-flex, box-direction.

Flex :

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

Leia mais sobre centrando os elementos filhos

• Link 2

• ligação 3

• Fazer a ligação 4

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

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

Answer 4

Suponha que a sua div é 200px ampla:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Certifique-se o elemento pai é posicionado isto é relativo, fixo, absoluto, ou pegajoso.

Se você não sabe a largura do seu div, você pode usar transform:translateX(-50%); em vez da margem negativa.

https://jsfiddle.net/gjvfxxdj/

Answer 5

Eu criei este exemplo para mostrar como verticalmente e horizontalmente align.

código é basicamente isso:

#outer {
  position: relative;
}

e ...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

e vai ficar no center mesmo quando você re-size sua tela.

Answer 6

Alguns comentários mencionaram o caminho CSS 3 para o centro usando display:box.

Esta sintaxe é ultrapassada e não deve ser mais utilizado. [Veja também este post] .

Então, só para ser completo aqui é o último caminho para o centro em CSS 3 usando o Box flexível layout Módulo .

Então, se você tem 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, aqui está o que você precisa sobre o 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 para apoiar os navegadores mais antigos que usam sintaxe mais antiga para flexbox aqui está um bom lugar para olhar .

Answer 7

Se você não quiser definir uma largura fixa e não quer que a margem extra, adicione display: inline-block ao seu elemento.

Você pode usar:

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

Answer 8

Centering um div de altura desconhecida e largura

horizontalmente e verticalmente. Ele funciona com os navegadores razoavelmente moderno (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>

Tinker com ele mais adiante Codepen ou em JSBin .

Answer 9

Pode não ser centrado, se você não dar-lhe uma largura, caso contrário ele irá tomar, por padrão todo o espaço horizontal.

Answer 10

do CSS3 propriedade box-align

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

Answer 11

Defina a width e conjunto margin-left e margin-right para auto. Isso é para horizontal apenas , no entanto. Se você quiser nos dois sentidos, você tinha acabado de fazer as duas coisas. Não tenha medo de experimentar; não é como você vai quebrar nada.

Answer 12

Eu tive recentemente para centralizar uma div "escondido" (ie, display: none;) que tinha uma forma entregue dentro dele que precisava ser centrado na página. Eu escrevi o seguinte jQuery para exibir a div oculta e, em seguida, atualizar o CSS a largura gerado automática da tabela e alterar a margem para centralizá-la. (A alternância de exibição é acionado clicando em um link, mas esse código não foi neccessary para exibição.)

NOTA:. Eu estou compartilhando este código porque o Google trouxe-me a esta solução Stack Overflow e tudo teria dado certo, exceto que os elementos escondidos não têm qualquer largura e não podem ser redimensionadas / centrado até depois que eles são 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>

Answer 13

A forma como eu costumo fazer isso é utilizando a posição absoluta:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

O div exterior não precisa de nenhum propertites extras para que isso funcione.

Answer 14

Para Firefox e Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Para o 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 propriedade text-align: é opcional para navegadores modernos, mas é necessário no Internet Explorer Modo Quirks para suporte navegadores antigos.

Answer 15

Esta é a minha resposta.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Answer 16

Outra solução para este sem ter de definir uma largura para um dos elementos está a utilizar o atributo transform CSS 3.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

O truque é que translateX(-50%) define o elemento #inner 50 por cento para a esquerda de sua própria largura. Você pode usar o mesmo truque para alinhamento vertical.

Aqui está um mostrando alinhamento Fiddle horizontal e vertical.

Mais informações estão no Mozilla Developer Network .

Answer 17

Chris Coyier que escreveu um excelente post em 'Centering na Desconhecido 'em seu blog. É um ajuntamento de múltiplas soluções. Eu postei um que não é lançado nesta questão. Ele tem mais suporte ao navegador, em seguida, a solução-flexbox, e você não está usando 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;
}

Answer 18

Eu percebo que eu sou muito tarde para o jogo, mas esta é uma questão muito popular, e eu encontrei recentemente uma abordagem que eu não vi mencionado em qualquer lugar aqui, então eu percebi que eu documentá-lo.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

EDIT:. Ambos os elementos devem ter a mesma largura para funcionar corretamente

Answer 19

Por exemplo, veja este link e o trecho 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 um monte de crianças menores de um pai, para que o seu conteúdo CSS deve ser como exemplo este no violino .

O olhar de conteúdo HTML gosta deste:

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

Answer 20

Centering apenas horizontalmente

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

O recipiente:

• deve ter text-align: center;

A caixa de conteúdo:

• deve ter display: inline-block;

Demonstração:

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

---

Centering tanto horizontal e verticalmente

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

O recipiente externo:

• deve ter display: table;

O recipiente interno:

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

A caixa de conteúdo:

• deve ter display: inline-block;

Demonstração:

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

Answer 21

A maneira mais fácil:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Answer 22

Se a largura do conteúdo é desconhecido você pode usar o método a seguir . Suponha que temos estes dois elementos:

• .outer - largura total
• .inner - nenhum conjunto de largura (mas um max-width poderia ser especificados)

Suponha que a largura calculado dos elementos são 1000px e 300px respectivamente. Faça o seguinte:

1. Enrole .inner dentro .center-helper
2. Faça .center-helper um bloco em linha; torna-se o mesmo tamanho que .inner tornando-300px de largura.
3. .center-helper impulso 50% direito relativo a seu pai; este coloca a sua esquerda na 500px wrt. exterior.
4. Premir .inner 50% deixaram relativo a seu pai; este coloca a sua esquerda em wrt -150px. ajudante centro que significa que sua esquerda está em 500-150 = 350px wrt. exterior.
5. Set estouro em .outer para oculto para evitar a barra de rolagem horizontal.

Demonstração:

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>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

Answer 23

Você pode fazer algo como isto

#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 irá alinhar o #inner verticalmente. Se você não quiser, retire as propriedades display e vertical-align;

Answer 24

Aqui está o que você quer no caminho mais curto.

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

Answer 25

Text-align: center

text-align: center os conteúdos em linha são centrados dentro da caixa de linha. No entanto, desde o div interna tem por width: 100% padrão, você tem que definir a largura ou a utilização específica de uma das 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>

---

margin: 0 auto

Usando margin: 0 auto é outra opção e é mais adequado para a compatibilidade dos navegadores mais antigos. Ele trabalha em conjunto com display: table .

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

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

---

Flexbox

display: flex comporta-se como um elemento de bloco e estabelece o seu conteúdo de acordo com o modelo flexbox. Ele funciona com justify-content: center .

Por favor nota: Flexbox é compatível com a maioria dos navegadores, mas não todos. Consulte aqui para uma completa e lista atualizada de compatibilidade browsers.

#inner {
  display: inline-block;
}

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

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

---

Transform

transform: translate permite que você modifique o espaço do modelo de formatação visual CSS coordenadas. Usando-o, os elementos podem ser traduzidos, girado, dimensionado, e distorcida. Para o centro horizontalmente que exigem position: absolute e left: 50% .

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

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

---

<center> (preterido)

A tag <center> é a alternativa HTML para text-align: center . Ele funciona em navegadores mais antigos ea maioria dos novos, mas não é considerado uma boa prática uma vez que este recurso é obsoleto e foi removidodos padrões da Web.

#inner {
  display: inline-block;
}

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

Answer 26

Você pode usar display: flex para o seu div externa e centrar horizontalmente você tem que adicionar justify-content: center

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

ou você pode visitar w3schools -. CSS flexionar Propriedade para mais ideias

Answer 27

Este método também funciona muito bem:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

Para o <div> interior, a única condição é que a sua height e width não deve ser maior do que os de seu recipiente.

Answer 28

Flex tem cobertura de suporte ao navegador mais de 97% e pode ser a melhor maneira de resolver este tipo de problemas dentro de poucas linhas:

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

Answer 29

Bem, eu consegui encontrar uma solução que talvez vai caber todas as situações, mas usa 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 fragmento 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 ágil, você pode 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);
  })
});

Answer 30

Uma opção existia, que eu encontrei:

Todo mundo diz ao uso:

margin: auto 0;

Mas há uma outra opção. Definir essa propriedade para a div pai. isto funciona perfeitamente a qualquer hora:

text-align: center;

E veja, centro go criança.

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