Como centralizar horizontalmente div dentro do div pai

114

Como faço para centralizar um divhorizontalmente dentro de seu pai divcom CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css

— Águia
fonte

1

Aqui estão dois métodos simples para centralizar divs dentro de divs, verticalmente, horizontalmente ou ambos (CSS puro): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

158

Estou assumindo que o div pai não tem largura ou é grande e o div filho tem uma largura menor. O seguinte definirá a margem superior e inferior para zero e os lados para se ajustarem automaticamente. Isso centraliza o div.

div#child {
    margin: 0 auto;
}

— Mark Embling
fonte

@Marca. Você sabe como fazer isso funcionar no IE6? O IE6 é realmente péssimo, mas ainda há algumas pessoas que o usam.

— Bakhtiyor

@Bakhtiyor: pelo que me lembro, sim. Que problemas você está vendo? você pode querer abrir uma nova pergunta se houver algum problema específico que você está tendo que não foi abordado antes. Não tenho acesso ao IE6 para verificar.

— Mark Embling,

3

@Bakhtiyor: na verdade, tendo pensado sobre isso, acho que no IE.old você também precisa definir text-align: center;o parentdiv e, em seguida, defini-lo novamente para a esquerda (ou qualquer outra coisa) para childaquele. Não tenho certeza se esse problema afeta o IE6 ...

— Mark Embling

@Mark & @Bakhtiyor por algum motivo, meu childdiv aparentemente foi deslocado para a esquerda - em comparação com navegadores que são mais compatíveis com os padrões - em todas as versões do IE que verifiquei (IE6-8). E text-align: center;para o parente text-align: left;para o childconsertado para todas essas versões.

— brookmarker

7

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

— James Goodwin
fonte

2

Esta solução é compatível com o IE 6, mas não se esqueça de adicionar text-align:left;ao #child div

— Moak,

1

text-align:centerpara o div filho ou o div pai?

— Anish Nair

6

Só por interesse, se você deseja centralizar dois ou mais divs (para que fiquem lado a lado no centro), veja como fazer isso:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

— Paul Chris Jones
fonte

4

Você pode usar o valor "auto" para as margens esquerda e direita para permitir que o navegador distribua o espaço disponível igualmente em ambos os lados do div interno:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

— x4u
fonte

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

— Soufiane Hassou
fonte