Verticalmente centrar cualquier elemento en CSS

En este artículo, vamos a aprender a conjunto vertical central en alineación con un elemento con CSS ?

En el último mensaje discutimos sobre elementos de centrado horizontal, aquí hay un enlace a seguirlo: Centro de cualquier elemento horizontal en el CSS.

Hoy vamos a class abajo el código para centrar verticalmente cualquier elemento en CSS .

similares a centrado horizontal, CSS funciona de forma diferente break elementos en línea y bloquear for centrado vertical también. CSS tiene algunas reglas que se deben seguir, y una vez que lo hizo, obtendrá el posicionamiento en cualquier parte derecha de la página.

elementos de centrado Inline

Los elementos en línea son los elementos que van con el flujo de contenido. Considerando que, con elemento de bloque ocupa nueva línea y el espacio hasta la anchura del elemento padre. Estos for el texto de un párrafo, enlace o algún otro texto.

La clave para el centrado vertical es con una propiedad de texto llamado, line-height . La altura de la línea es el espacio por encima y por debajo del texto. Por lo tanto, si su contenedor primario es de altura , decir 100px , y luego aplicar line-height de 100px como el texto se llevará a 100px como altura y centrar el contenido verticalmente. Ver demostración al final del artículo.

Código

.text {
line-height: 100px;
}

de centrado elementos de bloque

Los elementos de bloque son bastante complicado a la posición vertical. Tenemos que aplicar un truco para conseguir que coloca en el centro vertical.

Tenemos que empezar primero con el elemento padre. Se requiere las dimensiones de anchura y altura junto con valor de la propiedad posición como relativa , porque estaremos transformándolo del niño (el elemento a estar centrado) con respecto a la misma.

Código

.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}

En primer lugar, sino que también establece la posición del elemento como relativo, porque tenemos que moverlo con respecto a su posición actual. Ahora, tenemos una superior propiedad cuyo valor es 50% . Esto significa que lo mueven 50% desde la parte superior. Pero aquí hay un include, se alinea el borde superior del elemento a la altura del 50% de la parte superior, lo que no lo hace en el centro vertical y la posición más baja.

Utilizando la transformada valor de la propiedad translateY () movemos el elemento a la parte superior por su propio 50% , por lo que el centro alineado con el centro de la matriz. Y esto hace que sea centrado verticalmente al contenedor principal.

He aquí una demostración,

DEMO

HTML con CSS

<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Vertical Center</title>
<!-- CSS code below -->
<style>
.parent {
position: relative;
width: 250px;
height: 250px;
background: #ddd;
}
.inline {
line-height: 250px;
text-align: center;
}
.box {
position: relative;
width: 200px;
height: 100px;
background: #f56;
top: 50%;
transform: translateY(-50%);
margin: auto;
}
</style>
</head>
<body>
<h2>CSS Vertical center</h2>
<h3>1. Inline element</h3>
<div class='parent'>
<p class="inline">Inline element</p>
</div>
<h3>2. Block Element</h3>
<div class="parent">
<div class="box">
<p>Block element</p>
</div>
</div>
</body>
</html>

Esperanza usted tiene gusto del artículo. Comparte tu opinión en los comentarios a continuación.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *