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

Me había estado devanando los sesos 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%;
	}

<!-- and used the following div structure. -->

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

Si bien esto pareció funcionar en este caso, me sorprendió que cuando aumentaba o disminuía el ancho de mi div base, la alineación vertical se rompía. Esperaba que cuando estableciera la propiedad padding-top, 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 ancho. :(

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

Feb 13 '11 11:02 Ryan

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

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

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

Oct 08 '2015 18:10 willoller

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 en función del tamaño del elemento exterior, no de su padre, pero este tamaño en sí puede ser relativo al padre y de esta manera el espaciado también será relativo.

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

Primera opción: utilizar pseudoelementos, aquí el espaciado vertical y horizontal es relativo al exterior. Manifestación

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

Mover el espaciado horizontal al elemento exterior lo hace relativo al padre del exterior. Manifestación

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

Segunda opción: utilizar posicionamiento absoluto. Manifestación

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

Feb 01 '2014 22:02 user

Para que el elemento secundario esté absolutamente posicionado desde su elemento principal, debe establecer la posición relativa en el elemento principal Y la posición absoluta en el elemento secundario.

Luego, en el elemento secundario, 'superior' es relativo a la altura del elemento principal. Por lo tanto, también es necesario "traducir" al niño hacia arriba 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 que utiliza 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ás ventajas/desventajas para ambos.

Feb 05 '2016 03:02 alain