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;
}

Comentarios

Entradas populares de este blog

Llamar a imagenes en carpetas y subcarpetas con HTML y PHP

Crear cookies con tiempo en localhost - PHP

Configuracion basica en la estructura HTML