html - vertical - div centralizada responsiva




Como centralizar horizontalmente um<div>? (20)

Alinhamento de texto: centro

Aplicando o text-align: center o conteúdo in-line e centralize-o na caixa de linha. No entanto, como o div interno tem por padrão width: 100% você precisa definir uma largura específica ou usar um dos seguintes:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Margem: 0 auto

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

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

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

Por favor note: Flexbox é compatível com a maioria dos navegadores, mas não todos. Veja here 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: translate permite modificar o espaço de coordenadas do modelo de formatação visual CSS. Usando-o, os elementos podem ser traduzidos, girados, dimensionados e inclinados. Para centralizar horizontalmente, é necessário position: absolute e left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

(descontinuado)

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

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

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

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

Centralizando apenas horizontalmente

Na minha experiência, a melhor maneira de centralizar uma caixa horizontalmente é 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 violino !

Centrando horizontalmente e verticalmente

Na minha experiência, a melhor maneira de centralizar uma caixa na vertical e na horizontal é usar um contêiner 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 violino !


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>


A maneira que costumo fazer é usar a posição absoluta:

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

O div externo não precisa de nenhuma propriedade extra para que isso funcione.


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

As melhores abordagens são com o 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%;
}

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 como centralizar os elementos filhos

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


Chris Coyier, que escreveu um excelente post sobre "Centering in the Unknown" em seu blog. É um resumo de várias soluções. Eu postei um que não foi postado nesta pergunta. Ele tem mais suporte ao navegador do que 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;
}

Defina a width e defina margin-left e margin-right como auto . Isso é apenas para horizontal , no entanto. Se você quer as duas coisas, você faria as duas coisas. Não tenha medo de experimentar; Não é como se você quebrasse alguma coisa.


Esta é minha resposta.

#outerDiv {
  width: 500px;
}

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


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 <div> interno, a única condição é que sua height e width não devem ser maiores que as de seu contêiner.


Eu recentemente tive que centrar um div "escondido" (isto é, display: none;) que tinha uma forma tabelada dentro dele que precisava ser centralizada na página. Eu escrevi o seguinte jQuery para exibir o div oculto e, em seguida, atualizar o CSS para a largura gerada automaticamente da tabela e alterar a margem para centralizá-lo. (A alternância de exibição é acionada clicando em um link, mas esse código não era necessário para exibição.)

OBSERVAÇÃO: estou compartilhando este código porque o Google me trouxe para essa solução de estouro de pilha e tudo funcionou, exceto que os elementos ocultos não têm largura e não podem ser redimensionados / centralizados até que sejam 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 Flex tem mais de 97% de cobertura de suporte ao navegador e pode ser a melhor maneira de resolver esse tipo de problema em poucas linhas:

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

Para o Firefox e o 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ária no Modo Quirks do Internet Explorer para suporte a navegadores legados.


Percebo que estou atrasado para o jogo, mas essa é uma pergunta muito popular, e recentemente encontrei uma abordagem que não vi mencionada em nenhum lugar aqui, então imaginei que fosse documentar.

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

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

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


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

Você pode usar:

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

Se você não quiser definir uma largura fixa na div interna, poderá fazer algo assim:

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

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


Tente brincar com

margin: 0 auto;

Se você quiser centralizar seu texto também, tente usar:

text-align: center;

Uma opção existia que eu encontrei:

Todo mundo diz para usar:

margin: auto 0;

Mas há outra opção. Configure esta propriedade para o div pai. 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 */
}

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






centering