Existem várias maneiras. Estes métodos são dividos em "largura definida" e "largura variável" pois depende da sua necessidade de implementação.
Algumas são semanticamente mais recomendadas, porém ainda não funcionam em quase nenhum navegador, outras já existem há muito tempo e continuam sendo utilizadas pois apresentam compatibilidade superior.
Largura Definida
Existem três métodos populares para fazer isso, são eles:
Margem Automática
#inner {
margin: 0 auto;
width: 50%; /* Altere para o valor da largura desejada. */
}
O que nós fizemos aqui foi informar o valor auto
para as propriedades de margin-left
e margin-right
que vai calcular automaticamente a diferença de espaço restante e magicamente centralizar o seu elemento horizontalmente. É importante lembrar que a mesma regra não vale para centralizar um objeto verticalmente.
Internet Explorer 6: Esta versão do Internet Explorer necessita da adição da propriedade text-align: center;
neste código.
Internet Explorer 8: Se você tiver problemas de compatibilidade com o Internet Explorer 8, é melhor que adicione a propriedade display: table;
neste código.
Posição Absoluta
#outer {
position: relative;
width: 100%;
}
#inner {
left: 50%;
margin-left: -100px; /* A metade de sua largura. */
position: absolute;
width: 200px; /* O valor que você desejar. */
}
Embora utilize margem negativa e posição absoluta, este é o método mais compatível que existe.
Atenção: tome cuidado para que a utilização do position: absolute;
não comprometa a integridade do seu layout.
Embora mais recomendado, este método ainda está sendo disseminado e permanece como recurso experimental dos navegadores, por este motivo ainda é muito instável para ser utilizado.
#outer {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#inner {
width: 200px; /* Ou a que você quiser. */
}
Largura Variável
Existem duas maneiras de posicionar com larguras variáveis, a mais compatível para este fim é com a utilização do inline-block
.
inline-block
#outer {
text-align: center;
width: 100%;
}
#inner {
display: inline-block;
}
O que vai fazer com que o elemento #inner
fique centralizado é a presença da propriedade text-align: center;
no #outer
. Porém é importante ressaltar que o nosso amigo Internet Explorer 7 e inferiores não suportam a propriedade display: inline-block;
.
CSS Transforms
Entretanto, se você só preocupado com navegadores que já suportam CSS3, é possível fazer isso de forma mais elegante e simples.
#outer {
position: relative;
width: 100%;
}
#inner {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
Isso também serve para posicionamentos verticais. :)