Quiero centrar un div en el medio de la página, intenté top:30%, pero cuando la ventana se redimensiona fuera de la alineación.centrar una casilla div en el medio de la página usando css
<div id=cent></div>
Gracias Jean
<div id="content"
style="text-align: center;
vertical-align: middle;
border-color: #000000;
border-width: 1px;
border-style: solid;
margin-top: 25%;
margin-bottom: 25%;">
hi
</div>
Esto funcionó para mí ...
Editar: Esto alineará toda la div ... independientemente del tamaño de la div o la página. .. Suponiendo que este ID sea el único div en toda la página ...
sólo hay que alinear el div no el texto – X10nD
Si conoce el alto/ancho de ese div (por ejemplo, será 100px X 200px), entonces puede hacerlo así:
#cent {
position:absolute;
top:50%;
left:50%;
margin-top:-50px; /* this is half the height of your div*/
margin-left:-100px; /*this is half of width of your div*/
}
ACTUALIZACIÓN: otra opción: ver http://www.w3.org/Style/Examples/007/center (Centrar verticalmente)
Adición de notas a naivists enlace (a sitio de consejos W3C): display:table-cell no funciona con height:100%. Por lo tanto, si desea centrar verticalmente un elemento, que no conoce su altura, en una página, debe colocarlo dentro de un contenedor con display:table y height:100%, y otro contenedor con display:table-cell y vertical-align:middle.
Además, si desea centrarlo horizontalmente, debe especificar width:100% en el cuerpo, el contenedor exterior, y dar text-align:center al contenedor interno. El contenido debe tener display:inline-block y restablecer la alineación, text-align:left.
En última instancia, se hace de la siguiente manera:
<style>
#vcontainer {
display: table;
height: 100%;
width: 100%;
}
#hcontainer {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#content {
display: inline-block;
border: lightGray 1px solid;
background-color: lightBlue;
text-align: left;
}
</style>
<body>
<div id="vcontainer"><div id="hcontainer">
<div id="content">
Hoyjo!<br>
I have returned to my hometown!<br>
Lolololo lololo lololo lololo lololo!<br>
</div>
</div></div>
</body>
No puedo garantizar que funcionará en navegadores antiguos (IE6/7). Funcionará en IE8 siempre que se ejecute en los estándares de IE8 (sí, esto le hará perder la cabeza. ¡Gracias, MS!), Y debe dar <html> y <body> el height:100%.
Así es como:
#cent
{
margin-left:50px;
margin-right:50px;
}
Ahora su div va a ser 50px de izquierda y derecha y centrada en cualquier recipiente en que lo tienes en
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
HTML:.
<div id="box"></div>
CSS:
#box{
background-color: green;
width:100px;
height:100px;
margin:auto; /*you only need this part to center*/
}
Cumplida con las comillas o las comillas dobles en la "caja" de identificación, las necesita.
Este tipo de pregunta necesita un código de muestra si algunos intentan responderlo ... Sin ninguna idea acerca de cómo se ubica el div dentro de sus elementos principales y hermanos, no hay forma de entender su problema. ¡Salud! – SpikETidE
Es sólo un div sencilla ningún padre o hijo – X10nD