html - horizontally - vertical align middle css

¿Cómo establecer el margen o relleno como el porcentaje de altura del contenedor principal?

Question

He estado analizando mis cerebros sobre la creación de una alineación vertical en CSS usando lo siguiente

.base{
    background-color:green;
    width:200px;
    height:200px;
    overflow:auto;
    position:relative;
}

.vert-align{
    padding-top:50%;
    height:50%;
}

y usó la siguiente estructura div.

<div class="base">
   <div class="vert-align">
       Content Here
   </div>
</div>

Si bien esto parecía funcionar para este caso, me sorprendió que cuando aumentara o disminuyera el ancho de mi div base, la alineación vertical se rompería. Esperaba que cuando estableciera la propiedad de relleno, tomaría el relleno como un porcentaje de la altura del contenedor principal, que es la base en nuestro caso, pero el valor anterior del 50 por ciento se calcula como un porcentaje del anchura. :(

¿Hay alguna manera de establecer el relleno y / o margen como un porcentaje de la altura, sin recurrir al uso de JavaScript?

Answer 1

Aquí hay dos opciones para emular el comportamiento necesario. No es una solución general, pero puede ayudar en algunos casos. El espaciado vertical aquí se calcula sobre la base del tamaño del elemento externo, no su elemento principal, pero este tamaño en sí mismo puede ser relativo al elemento principal y de esta manera el espacio será relativo también.

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

Primera opción: use pseudo-elementos, aquí el espaciado vertical y horizontal son relativos al exterior. Demo

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

Mover el espaciado horizontal al elemento externo lo hace relativo al padre del exterior. Demo

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

Segunda opción: use posicionamiento absoluto. Demo

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

Answer 2

Este es un error muy interesante. (En mi opinión, es un error de todos modos) ¡Buen hallazgo!

En cuanto a cómo establecerlo, recomendaría la respuesta de Camilo Martin. Pero en cuanto a por qué , me gustaría explicar esto un poco si no les importa.

En las especificaciones de CSS , encontré:

''relleno''
Porcentajes: se refiere al ancho del bloque contenedor

... que es raro, pero está bien.

Entonces, con un width: 210px parental width: 210px y un padding-top: 50% secundario padding-top: 50% , obtengo un valor calculado / calculado de padding-top: 96.5px , que no es el esperado de 105px .

Esto se debe a que en Windows (no estoy seguro de otros SO), el tamaño de las barras de desplazamiento comunes es por defecto 17px × 100% (o 100% × 17px para barras horizontales). Esos 17px se 17px antes de calcular el 50% , de ahí el 50% of 193px = 96.5px .

Answer 3

Otra forma de centrar una línea de texto es:

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

o solo

.parent{
  overflow: hidden; /* if this ins''t here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

Answer 4

Para hacer que el elemento hijo se posicione absolutamente desde su elemento primario, debe establecer la posición relativa en el elemento padre Y la posición absoluta en el elemento hijo.

Luego, en el elemento secundario ''top'' está relacionado con la altura del elemento principal. Entonces también necesita ''traducir'' hacia arriba al niño el 50% de su propia altura.

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

    <div class="base">
        <div class="vert-align">
            Content Here
        </div>
    </div>

Hay otra solución usando flex box.

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}

<div class="base">
    <div class="vert-align">
        Content Here
    </div>
</div>

Encontrará ventajas / desventajas para ambos.

Answer 5

También tuve este problema (+1). Estoy seriamente molesto por eso, es estúpido tener que hacer esto.

La solución es que sí, el relleno vertical y el margen son relativos al ancho, pero la top e bottom no.

Así que solo coloque un div dentro de otro, y en el div interno, use algo como top:50% (recuerde que la position importante si aún no funciona)

Answer 6

Un relleno del 50% no centrará a su hijo, lo colocará debajo del centro. Creo que realmente quieres un colchón de 25%. ¿Tal vez te estás quedando sin espacio a medida que tu contenido se hace más alto? ¿También ha intentado configurar el margen superior en lugar de relleno superior?

EDITAR: No importa, el sitio de w3schools dice

% Especifica el relleno en porcentaje del ancho del elemento contenedor

Entonces, ¿tal vez siempre use ancho? Nunca me había dado cuenta.

Sin embargo, lo que está haciendo se puede lograr usando display: table (al menos para navegadores modernos). La técnica se explica aquí .

Answer 7

Una respuesta a una pregunta ligeramente diferente: puede usar unidades vh para rellenar elementos en el centro de la ventana gráfica :

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>