Teoría
Teoría

Cómo centrar un elemento

Para centrar un elemento de bloque, sigue estos pasos:

Asígnale un ancho menor que el de su contenedor padre.
Asigna el valor auto a sus márgenes derecho e izquierdo.

Por ejemplo:

selector {
  width: 100px;
  margin: 0 auto;
}

selector {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Cómo centrar un elemento</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block">Bloque 1</div> </body> </html>

CSS

body { padding: 20px; } .block { height: 100px; line-height: 100px; text-align: center; }

ObjetivosRealizado

Asigna un ancho de 100px al bloque.
Centra el bloque.