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:

Como centrar un texto mediante CSS y no con HTML
- 559
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera. La forma correcta de hacerlo es mediante CSS.
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 228
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Guía rápida para crear botones personalizados con CSS
- 104
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Resumen de como comentar código en html, css y javascript
- 584
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...
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 203
Código html y css de como crear un menú vertical con un submenú horizontal.
Sintaxis CSS básica. Cómo se escribe el CSS.
- 248
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Pseudo Clases :link, :active, :hover y :visited
- 109
Las pseudoclases sirven para definir estados en los que se encuentra una etiqueta html. Vemos las pseudoclases link, active, hover y visited.
LibrosWeb ahora es UniWebSidad
- 204
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Dimensiones reales de una caja en CSS
- 202
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.
Concepto de cascada en CSS
- 234
En CSS existen una serie de normas que dan prioridad a las instrucciones que afectan a cada etiqueta html en función de su importancia, grado de especificidad y orden de aparición. Veámoslo.
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.