Como centrar un h1 en css

El texto h1 alineado al centro no funciona

Las etiquetas de encabezado son elementos a nivel de bloque, lo que significa que ocuparán todo el espacio horizontal posible. Si lo miras en tus herramientas de desarrollo verás que ocupa todo el ancho del puerto de vista, por lo que usar márgenes automáticos en él no hará nada. Lo que sí puedes hacer es centrar el texto en el <h1> usando text-align.

Ten paciencia conmigo, pero estoy asumiendo que te refieres a la sección de Inspección de Elementos. Por lo poco que sé de esta parte del navegador, supongo que estás mirando la sección de Estilos y sí, veo que tanto el h1 como la imagen ocupan todo el ancho. Como el elemento img sí se centró, supongo que no es un elemento de nivel de bloque y por tanto le viene bien el comando margin: auto para centrarlo.

Css centrar img en div

A veces no es el texto el que necesita estar centrado, sino el bloque en su conjunto. O, dicho de otra manera: queremos que el margen izquierdo y el derecho sean iguales. La forma de hacerlo es establecer los márgenes en ‘auto’. Esto se utiliza normalmente con un bloque de ancho fijo, porque si el bloque en sí es flexible, simplemente ocupará todo el ancho disponible. He aquí un ejemplo:

El nivel 2 de CSS no tiene una propiedad para centrar cosas verticalmente. Probablemente habrá una en el nivel 3 de CSS (ver más abajo). Pero incluso en CSS2 se pueden centrar los bloques verticalmente, combinando algunas propiedades. El truco está en especificar que el bloque exterior debe ser formateado como una celda de tabla, porque el contenido de una celda de tabla puede ser centrado verticalmente.

El ejemplo siguiente centra un párrafo dentro de un bloque que tiene una altura determinada. Otro ejemplo muestra un párrafo centrado verticalmente en la ventana del navegador, porque está dentro de un bloque que está absolutamente posicionado y es tan alto como la ventana.

El nivel 3 de CSS ofrece otras posibilidades. En este momento (2014), todavía se está discutiendo una buena manera de centrar los bloques verticalmente sin utilizar el posicionamiento absoluto (que puede causar la superposición de texto). Pero si sabes que el texto superpuesto no será un problema en tu documento, puedes usar la propiedad ‘transform’ para centrar un elemento con posicionamiento absoluto. Por ejemplo:

Css position center of screen

Puedes usar display: table en el encabezado. Esto hará que el encabezado tenga un ancho que dependa de su contenido, mientras que seguirá siendo un elemento a nivel de bloque. Y puedes centrarlo usando la propiedad margin: 0 auto.

Estoy de acuerdo con @j10i2 – .container{text-align:center;}, pero otra forma de hacerlo es centrar el contenido dentro del h1. El h1 es un elemento de nivel de bloque – por lo que insertar un span en él y colocar el texto dentro de eso. Ahora aplicando el text-align: center permitirá centrar el span dentro del h1.

Centrar h1 en div flex

Quiero centrar mi elemento h1 en la cabecera, pero no funciona. Debería estar en el centro de la cabecera de 450px, mientras que la barra de navegación se queda en la parte superior derecha. Y si es posible quiero poner un logo en la parte superior izquierda. Lo he probado con align, position y margin auto. Si alguien pudiera ayudarme y mostrarme mi error, estaría bien, gracias.

Añadiendo un div con clear:both después de tu </nav> se soluciona el problema. Sin embargo, como han señalado los demás, sigues teniendo muchos errores en tu código (faltan puntos y comas y una línea de margin o padding que sólo incluye los números, y no la propiedad de estilo real) y sigues necesitando aplicar un text-align:center a tu h1 si quieres que el texto esté centrado. He corregido y hecho esto en el código de abajo.

Ten en cuenta que si no borras el float y corriges tus errores en el css, consiguiendo así un font-size de 72px, parecerá que los elementos están alineados correctamente. Sin embargo, su h1 seguirá estando detrás de su nav y el problema no está realmente solucionado. Si decide disminuir el tamaño de la fuente, el problema aparecerá de nuevo.