css: como centrar o elemento div box directamente no centro?
Quando USO top: 50% e esquerda: 50%
a caixa não está directamente no centro. claro que quando a caixa é muito pequena, parece estar centrada. mas quando a caixa é um pouco grande, parece que não está centrada.
Como posso resolver isto ?7 answers
top e left corresponde ao canto superior esquerdo da tua caixa. O que estás a tentar fazer é que correspondam ao centro. Então, se você definir margin-top e margin-left para negativo de metade da altura e largura, respectivamente, você vai ter uma caixa centrada.
Exemplo para uma caixa de 300x200:
width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
Horizontal: usar uma largura fixa e
margin-left: auto;
margin-right: auto;
display: table-cell
Para o DIV circundante e depois dar-lhe um
vertical-align: middle
Você pode atribuir à caixa uma largura fixa e heigth, e então dar a sua margem-superior e Margem-Esquerda propriedades a metade negativa da altura e largura.
Editar : Exemplo
div.centered {
width: 500px;
height: 400px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -200px;
margin-left: -250px;
}
.overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#eee; /* aesthetics as you wish */
}
.overlay .vref { /* it is a vertical reference to make vertical-align works */
display:inline-block;
vertical-align:middle; /* this makes the magic */
width:1px;
height:100%;
overflow:hidden;
}
.overlay .message {
display:inline-block;
padding:10px;
border:2px solid #f00; /* aesthetics as you wish */
background-color:#ddd; /* aesthetics as you wish */
vertical-align:middle; /* this makes the magic */
max-width:100%; /* prevent long phrases break the v-alignment */
}
<div class="overlay">
<div class="vref"> </div>
<div class="message">whatever you want goes here</div>
<div class="vref"> </div>
</div>
Uma maneira é atribuir uma largura específica à caixa, em seguida, reduzir para metade a distância restante em cada lado (esquerda e direita). Isto pode ser mais fácil se você usar percentagens em vez de pixels widths, por exemplo,
<div style="margin-left:25%; margin-right:25%">...</div>
body { text-align: center; }
#box {
width: 500px; /* or whatever your width is */
margin: 10px auto;
text-align: left;
}
O acima centraria a sua caixa centralmente horizontalmente na página com uma margem de 10px no topo e no fundo (obviamente que a margem superior/inferior pode ser alterada para o que quiser). O 'texto-alinhar' no corpo é necessário para IE, o que, como de costume, não consegue o jeito dele de outra forma. Você então precisa do texto esquerdo-alinhar em sua caixa (a menos que você queira o texto no centro também) para neutralizar o centro de texto-alinhar no corpo.
Tentar centralizar verticalmente é quase ... mas é impossível usar CSS puro. Embora haja um alinhamento vertical no CSS, ele não funciona como o HTML vertical alinha em tabelas, então no CSS 2 não há alinhamento vertical incorporado como o HTML. O problema é que você está lidando com uma altura desconhecida-mesmo se você sabe a altura da sua caixa, a altura da página é desconhecida, ou melhor, o que você está tentando corrigir a caixa no centro de? A página? O viewport? A área de tela visível vai ser diferente para todos, dependendo de sua resolução de tela, navegador e todos os navegadores interpretam a altura de forma diferente. Existem vários métodos que afirmam ter resolvido o problema, mas geralmente não funcionam de forma confiável em todos os navegadores. Encontrei este no outro dia, o que não parece mau, mas não funciona no Google Chrome (trabalha no Firefox e no Opera, mas não tive oportunidade de verificar IE). Há uma discussão interessante sobre o problema no entanto neste tópico no mundo Webmaster isso resume os vários métodos e prós e contras deles e vale bem a pena olhar.Editar: A solução de Dav na primeira resposta funciona bem, desde que você (ou o visitante do site) não aumente o tamanho da fonte ou a altura da linha. O container será centrado, mas assim que o tamanho da fonte for aumentado ou mais conteúdo adicionado, ele transbordará o container.
O uso de {[1] } vai conseguir isso perfeitamente. basta aplicar este
div.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}