O CSS permite aplicar estilos seletivamente a elementos em documentos HTML neste exemplo básico vamos centralizar horizontalmente um <div> usando CSS. Supondo que você tenha a seguinte estrutura HTML básica por exemplo:
<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 width
para 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 IE8 +, 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>
Você terá um resultado assim:

Se você não quiser definir uma largura fixa no interior, div
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 transforma o interior div
em um elemento inline que pode ser centralizado com text-align
.
Pronto com isso você poderá centralizar horizontalmente um <div> usando CSS.