Centrar una división absoluta usando CSS
- Centrar elementos usando CSS
-
Centrar un Elemento Horizontalmente Usando la Propiedad
absoluta -
Centrar un Elemento Verticalmente Usando la Propiedad
absoluta -
Centre un elemento tanto horizontal como verticalmente usando la propiedad
absoluta - Conclusión
CSS (hojas de estilo en cascada) se utiliza para definir estilos para elementos HTML y cómo deben mostrarse al adaptarse a los diferentes dispositivos y tamaños de pantalla. El uso de CSS ahorra mucho trabajo, ya que puede controlar el diseño de varias páginas a la vez.
Veamos como centra los elementos dentro de una clase div usando la propiedad absoluta.
Centrar elementos usando CSS
Si queremos centrar cualquier texto, imagen, cuadro o grupo de elementos, debemos posicionarlos en vertical y en horizontal. Aunque parece que el centrado es sencillo con posicionamiento horizontal y vertical, los pasos que tenemos que seguir son algo complicados.
Podemos usar text-align: center; con en línea y margen: 0 auto; con elementos de bloque para centrar elementos horizontalmente. Usando la propiedad “absoluta” en CSS, también podemos centrar un elemento o grupo de elementos vertical, horizontal o vertical y horizontalmente.
Usar la Propiedad absoluta
A menos que especifiquemos una posición para que existan los elementos, permanecen estáticos por defecto. Las propiedades arriba, izquierda, derecha y abajo no funcionan con esto.
Por lo tanto, los elementos HTML en estático no están posicionados y aparecen tal como están en el lenguaje de marcado. Pero con la propiedad absoluta, los elementos se posicionan y se comportan como si no estuvieran allí.
El espacio del elemento posicionado absoluto se le quita y se asigna a otro, mientras que el elemento posicionado absoluto toma espacio por sí solo.
Supongamos que nuestro código HTML es el siguiente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Center an Absolute div</title>
</head>
<body>
<div class="container">
<div class="green-box"></div>
<div class="blue-box"></div>
</div>
</body>
</html>
Como en el fragmento de código anterior, se menciona que el tipo de documento es html y abrió tanto <html> como <head> al principio. Después de eso, define el juego de caracteres meta que permite el acceso a diferentes personajes.
Luego, el archivo CSS llamado estilo está vinculado con el archivo html actual usando href, y dentro del <title> mostró un título Center una div. A continuación, tenemos que abrir el <cuerpo> una vez después de cerrar el <cabeza>.
En el <cuerpo>, se abre una clase div denominada contenedor y se crean dos más green-box y blue-box. En la última parte, las etiquetas <div>, <body> y <html> son la secuencia de cierre.
estilo.css Código:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
}
.orange-box,.purple-box {
width: 100px;
height: 100px;
}
.orange-box {
background-color: orange;
}
.purple-box {
background-color: purple;
}
El fragmento de código anterior es el código dentro de style.css.
Al principio, creamos un contenedor de borde verde con propiedades definidas. Luego, construimos dos cajas en colores naranja y morado con 100px de ancho y alto.
Producción:
Personalizando las propiedades dentro de los cuadros en el archivo style.css, podemos centrarlos horizontalmente, verticalmente, o tanto horizontal como verticalmente.
Para tener una idea clara, personalicemos solo el cuadro morado. Para centrar los elementos, puede modificar el código anterior según los casos de uso que se mencionan a continuación.
Centrar un Elemento Horizontalmente Usando la Propiedad absoluta
Código de ejemplo:
.purple-box {
background-color: purple;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
Producción:
De acuerdo con el fragmento anterior, hemos posicionado el cuadro morado usando la propiedad absoluta, mientras que los valores para izquierda y derecha son 0. Además, los márgenes superior e inferior son 0, mientras que ambos Los márgenes izquierdo y derecho son automáticos.
Por lo tanto, toma un margen automático para el ancho del objeto.
Como podemos ver en la salida, el cuadro morado está centrado horizontalmente usando la propiedad de posición absoluta.
Centrar un Elemento Verticalmente Usando la Propiedad absoluta
Código de ejemplo:
.purple-box {
background-color: purple;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
Producción:
Con el fragmento de código anterior, hemos establecido el cuadro púrpura centrado verticalmente usando la propiedad absoluta en la posición y configurando los valores para arriba y abajo como 0. Además, configure el valor margen auto tanto para superior como para inferior, mientras que el valor del margen es 0 para izquierda y derecha.
Después de personalizar el cuadro morado como el código anterior, podemos colocarlo centrado verticalmente usando la propiedad absoluta que se muestra en el resultado anterior.
Centre un elemento tanto horizontal como verticalmente usando la propiedad absoluta
Código de ejemplo:
.purple-box {
background-color: purple;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
}
Producción:
Este método es una colección de los métodos anteriores. Para centrar el cuadro morado horizontal y verticalmente, hemos establecido el valor 0 para derecha, izquierda, arriba y abajo después de configurar la posición como absoluta.
Luego asignamos auto como el valor de “margen” para “arriba”, “abajo”, “izquierda” y “derecha”.
Adaptando el método anterior, podemos centrar el cuadro morado vertical y horizontalmente en relación con la página. Pero aquí, estamos usando un contenedor.
Si queremos centrar el cuadro morado apropiado para el contenedor con borde verde, debemos definir la posición “relativa” dentro de las propiedades del contenedor como se muestra a continuación.
Código de ejemplo:
.container {
margin: 50px;
display: flex;
border: 4px solid green;
padding: 50px;
width: 400px;
position: relative;
}
Producción:
Las tres instancias anteriores son las tres instancias principales para centrar un elemento, y hemos definido el ancho del cuadro morado en cada ejemplo.
Aparte de eso, si se desconoce el ancho, podemos usar el método de transformación con escalas relativas, y su uso funciona mejor al ser receptivo y flexible en lugar de especificar un valor para el ancho.
transform: translate(-50%, -50%);
transform: translate(-50%, 0);
transform: translate(0, -50%);
En este método, la escala izquierda en la función traducir va con el eje x mientras que la otra escala va con el eje y. Según la escala, el elemento responde.
Conclusión
Usando la propiedad absoluta, podemos cambiar el tamaño de los bloques y actuar de manera receptiva de acuerdo con los porcentajes. A lo largo de este artículo, hemos discutido cómo centrar los elementos horizontalmente, verticalmente y horizontalmente y verticalmente a través de un ejemplo.
Más que elementos estáticos, los elementos posicionados absolutos no respetan el contenedor donde los declaramos. Pero con el elemento posicionado relativamente, el elemento posicionado “absoluto” tiene un límite con las propiedades “margen” y “arriba”, “abajo”, “izquierda” y “derecha”.
El método de transformación aumenta la flexibilidad y la capacidad de respuesta si el ancho no está definido.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.