Centrar DIV horizontalmente
Para centrar una DIV de forma horizontal, debemos cumplir con 2 indicaciones dentro de nuestro CSS
La primera indicación será en el html o body; normalmente con body es suficiente, pero vamos a asegurar la función.
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
De esta manera, nos aseguramos de que el contenido de la web estará abarcando el 100% de la pantalla y que tambien, no va a dejar margenes de ningún tipo.
Despues de ésto, le agregamos a nuestra DIV la indicación de que queremos que se centre:
#div {
margin: 0 auto;
}
El "0", le dice que no queremos espacios ni arriba ni abajo, y el "auto" lo centra, es el que hace la magia.
Para que la DIV se centre, es importante indicarle el "width", ya que de lo contrario abarcará por default el 100% y de paso el "height" ya que su default es el 0, osea no se verá nada.
#div {
width: 100px;
height: 100px;
margin: 0 auto;
}
La primera indicación será en el html o body; normalmente con body es suficiente, pero vamos a asegurar la función.
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
De esta manera, nos aseguramos de que el contenido de la web estará abarcando el 100% de la pantalla y que tambien, no va a dejar margenes de ningún tipo.
Despues de ésto, le agregamos a nuestra DIV la indicación de que queremos que se centre:
#div {
margin: 0 auto;
}
El "0", le dice que no queremos espacios ni arriba ni abajo, y el "auto" lo centra, es el que hace la magia.
Para que la DIV se centre, es importante indicarle el "width", ya que de lo contrario abarcará por default el 100% y de paso el "height" ya que su default es el 0, osea no se verá nada.
#div {
width: 100px;
height: 100px;
margin: 0 auto;
}
Comentarios
Publicar un comentario