Ejemplo de centrado vertical y horizontal con CSS

Ejemplo de centrado vertical y horizontal con CSS

Print Friendly, PDF & Email
Ejemplo de centrado vertical y horizontal con CSS
Valora esta entrada
La mejor forma de centrar una caja verticalmente y horizontalmente es mediante CSS.

Para ello es necesario entender el funcionamiento del posicionamiento relativo y absoluto en un documento web.

En caso de tener estos conceptos un poco oxidados en esta lectura lo encontraréis explicado con todo detalle.

En el ejemplo que se expone a continuación se ha decidido centrar una caja que a su vez está centrada dentro de otra caja.

Se hace así para ilustrar con mayor amplitud el comportamiento del posicionamiento absoluto.

Recordar también que un centrado horizontal funciona de modo completamente distinto a uno vertical.

Atención porqué el centrado vertical detallado en este ejemplo sigue una estrategia muy distinta al centrado horizontal mediante la propiedad margin: auto

Como centrar horizontal y vertical al mismo tiempo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Centrado horizontal y vertical de una caja">
        <meta name="author" content="Francesc Ricart">
        <title>Ejemplo de centrado vertical y horizontal</title>
        <style>

            *{
                margin:0;
                padding:0;
                box-sizing:border-box;
            }
            .contenedor{
                width:400px;
                height:400px;
                background-color:#ff00ff;
                position:relative;    
            }
        
            .caja{
                width:100px;
                height:100px;
                background-color:#00ff00;
                position:absolute;
                top:50%;
                left:50%;
                margin-left:-50px;
                margin-top:-50px;
            }
            
            .cajita{
                width:40px;
                height:40px;
                background-color:#f0000f;
                position:absolute;
                top:50%;
                left:50%;
                margin-left:-20px;
                margin-top:-20px;
            }
            
        </style>
    
    </head>
    <body>
        
    <div class="contenedor">
        <div class="caja">
            <div class="cajita">    
            </div>
        </div>
    </div>
   
    </body>
</html>

Código genérico

En el html podéis observar una caja de nombre contenedor, otra de nombre caja y finalmente una de nombre cajita. Se trata de 3 divs cada uno dentro del anterior.

En el CSS observar el uso de un selector universal para eliminar todos los paddings y márgenes que puedan venir por el navegador y el uso de box-sizing para garantizar que el width o height que indiquemos sea el real incluyendo margins y paddings en caso de usarlos.

Todas las cajas son cuadradas y tienen un ancho y una altura definidas.

A todas se les ha dado un color característico.

Código importante

En primer cabe recordar que el posicionamiento absoluto requiere de una caja a su mismo tiempo posicionada.

En caso de no encontrar ninguna caja la caja de referencia termina siendo por defecto el body del documento web.

Para evitar que suceda esto a la caja contenedor (en fucsia) se le ha dado un posicionamiento relative.

Así, evitamos que el div de nombre caja se posicione respecto del body en lugar del contenedor.

En caja hemos puesto un posicionamiento absolute y en cajita también.

Para centrar caja respecto de contenedor hemos usado las propiedades top y left al 50%. Sin embargo al hacer esto el vértice superior izquierdo de caja (la que sería la referencia 0,0) se ha posicionado justo en el centro de contenedor.

Todavía no esta centrada pero estamos muy próximos. Falta un pequeño desplazamiento de caja que conseguiremos mediante margin superior e izquierdo negativos. Los navegadores modernos son capaces de entender esta instrucción. Versiones antiguas de explorer pueden dar problemas.

El desplazamiento mediante margin negativo es exactamente width/2 a la izquierda y height/2 superior(de este modo se desplazan la mitad para un lado y para arriba.

Para finalizar se ha repetido exactamente el mismo procedimiento con cajita tomando como punto de referencia para el desplazamiento absoluto caja. Como caja ya tiene un position:absolute, cajita entiende sin problemas sobre que punto de referencia se posiciona.

El resultado final se observa en la imagen:

¡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:

Resumen de como comentar código en html, css y javascript
- 311
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 246
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
- 76
¿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.
Colores CSS para web
- 294
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...
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 44
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 217
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...
Pseudo Clases :link, :active, :hover y :visited
- 33
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 227
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.
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 67
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Dimensiones reales de una caja en CSS
- 111
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
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.