Ejemplo de centrado horizontal de una caja con CSS

Ejemplo de centrado horizontal de una caja con CSS

Print Friendly, PDF & Email
Ejemplo de centrado horizontal de una caja con CSS
Valora esta entrada
En esta publicación vemos un ejemplo de como podemos centrar una caja de tipo bloque mediante CSS.

Para ello aplicaremos estilos a un div con una clase de nombre “horizontal”.

Aplicaremos también estilos universales para resetear el margin y el padding que el navegador da por defecto a todas las cajas (etiquetas).

Y como es de costumbre, usaré la propiedad box-sizing:border-box para asegurarme que el width y el height siempre es el que se indique.

Atención porqué el centrado vertical funciona de un modo muy distinto al horizontal. El centrado vertical requiere dominar el posicionamiento relativo y absoluto de cajas.

Ejemplo de centrado horizontal

centrado horizontal

La propiedad que hace que el div se centre es:

margin: auto;

Le estamos diciendo al navegador que recalcule los márgenes top, right, bottom y left.

En realidad también podríamos haber escrito

margin: 20px auto; 

o similar.

En este caso sólo recalcula los márgenes left y right.

Como el navegador forzará que haya el mismo margen en la izquierda que en la derecha, el resultado será que la caja queda centrada.

Fijaros que estamos centrando la caja pero no el texto.

Para que el texto se centre evitar usar las etiquetas obsoletas <center>.

En su lugar usamos la propiedad text-align:center;

Fijaros que al minimizar las dimensiones del navegador para poder hacer la captura de pantalla el texto ha pasado a ocupar 2 líneas en lugar de 1.

ejemplo centrado horizontal
Resultado final con la pantalla del navegador reducida.

¡Hola!

Querido lector,

ahora sólo queda practicar.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Concepto de herencia en CSS
- 64
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Factores que afectan al tiempo de carga de una página web
- 148
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Unidades de medida absolutas y relativas en CSS
- 46
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 24
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 56
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Box Sizing, como modificar el modelo de cajas convencional
- 17
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Como centrar un texto mediante CSS y no con HTML
- 16
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 44
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Colores CSS para web
- 45
Existen distintas formas de indicar los colores que queremos dar a los elementos de un documento. Básicamente necesitamos dominar los colores RGB, RGBa y Hexadecimal. Se muestran varios ejemplos de us...
Como mezclar CSS y HTML. Acoplamiento CSS
- 45
Existen 3 mecanismos para mezclar html y css. Veamos como se hace.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.