Eu tenho uma div e quero que ela seja centralizada horizontalmente - embora eu esteja dando a ela margin:0 auto;
que não é centralizada ...
.container {
position: absolute;
top: 15px;
z-index: 2;
width:40%;
max-width: 960px;
min-width: 600px;
height: 60px;
overflow: hidden;
background: #fff;
margin:0 auto;
}
Respostas:
Você precisa definir
left: 0
eright: 0
.Isso especifica até que ponto as bordas da margem serão deslocadas dos lados da janela.
Fonte: http://www.w3.org/TR/CSS2/visuren.html#position-props
fonte
width
é imperdível!margin: auto
para que ele funcione no nosso casoIsso não funciona no IE8, mas pode ser uma opção a considerar. É principalmente útil se você não deseja especificar uma largura.
fonte
Embora as respostas acima estejam corretas, mas para simplificar para iniciantes, tudo o que você precisa fazer é definir margem, esquerda e direita. o código a seguir fará isso, desde que a largura esteja definida e a posição seja absoluta:
Demo:
fonte
Flexbox? Você pode usar o flexbox.
fonte
left: 0; right: 0;
estendido para 100%, o que não era uma opção, pois o elemento filho tinha uma cor de fundo eleft: 50%; transform: translateY(-50%);
não funcionou porque isso restringia o filho a 50% de largura. Essa foi a única solução que preservou as dimensões flexíveis da criança (limitada apenas ao suporte ao navegador). Obrigado!fonte
tão fácil, use apenas as margens e as propriedades esquerda e direita:
Você pode ver mais nesta dica => Como definir o elemento div para centralizar em html- Obinb blog
fonte
Aqui está um link, use-o para fazer a div no centro, se a posição for absoluta.
HTML:
CSS:
Exemplo jsfiddle
fonte
Você não pode usar
margin:auto;
emposition:absolute;
elementos, basta removê-lo se você não precisa dele, no entanto, se você fizer isso, você poderia usarleft:30%;
((100% -40%) / 2) e consultas de mídia para os valores máximo e mínimo:fonte