Como definir a margem ou o preenchimento como porcentagem da altura do contêiner pai?

Eu estava estourando meu cérebro sobre a criação de um alinhamento vertical em css usando o seguinte

.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>

Embora isso parecesse funcionar para este caso, fiquei surpreso que, quando aumentava ou diminuía a largura da minha base div, o alinhamento vertical se encaixava. Eu esperava que, ao definir a propriedade padding-top, o padding fosse considerado como uma porcentagem da altura do contêiner pai, que é a base do nosso caso, mas o valor acima de 50% é calculado como uma porcentagem da largura. :(

Existe uma maneira de definir o preenchimento e / ou margem como uma porcentagem da altura, sem recorrer ao JavaScript?

A correção é que sim, preenchimento vertical e margem são em relação ao largura, mas tope bottom não são.

Então, basta colocar uma div dentro de outra e, na div interna, use algo como top:50%(lembre- positionse de importar se ainda não funcionar)

Resposta a uma pergunta um pouco diferente: Você pode usar vhunidades para colocar elementos no centro da janela de exibição :

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

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

Aqui estão duas opções para emular o comportamento necessário. Não é uma solução geral, mas pode ajudar em alguns casos. O espaçamento vertical aqui é calculado com base no tamanho do elemento externo, não no pai, mas esse tamanho em si pode ser relativo ao pai e, dessa forma, o espaçamento também será relativo.

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

Primeira opção: use pseudoelementos, aqui os espaçamentos vertical e horizontal são relativos ao externo. Demo

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

Mover o espaçamento horizontal para o elemento externo o torna relativo ao pai do externo. Demo

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

Segunda opção: use posicionamento absoluto. Demo

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

Para tornar o elemento filho posicionado absolutamente a partir de seu elemento pai, você precisa definir a posição relativa no elemento pai E a posição absoluta no elemento filho.

Em seguida, no elemento filho 'top' é relativo à altura do pai. Então você também precisa 'traduzir' para cima a criança 50% da sua própria 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>

Existe outra solução usando a caixa flexível.

.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>

Você encontrará vantagens / desvantagens para ambos.

Isso pode ser alcançado com a writing-modepropriedade Se você definir um elemento writing-modepara um modo de gravação vertical, como, por exemplo vertical-lr, os valores percentuais de preenchimento e margem de seus descendentes em ambas as dimensões, tornar-se-á relativo à altura em vez da largura.

Das especificações :

. . . as porcentagens nas propriedades de margem e preenchimento, sempre calculadas com relação à largura do bloco contendo no CSS2.1, são calculadas com relação ao tamanho embutido do bloco contendo no CSS3.

A definição de tamanho embutido :

Uma medida na dimensão embutida: refere-se à largura física (dimensão horizontal) nos modos de escrita horizontal e à altura física (dimensão vertical) nos modos de escrita vertical.

Exemplo, com um elemento redimensionável, em que as margens horizontais são relativas à largura e as margens verticais são relativas à altura.

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}

<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

O uso de um modo de escrita vertical pode ser particularmente útil nas circunstâncias em que você deseja que a proporção de um elemento permaneça constante, mas que seu tamanho seja dimensionado em correlação com a altura em vez da largura.

Outra maneira de centralizar o texto de uma linha é:

.parent{
  position: relative;
}

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

ou apenas

.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;
}

Um estofamento de 50% não irá centralizar seu filho, ele o colocará abaixo do centro. Eu acho que você realmente quer 25% de preenchimento. Talvez você esteja ficando sem espaço à medida que seu conteúdo fica mais alto? Você também tentou definir o margin-top em vez de padding-top?

EDIT: Nevermind, diz o site w3schools

% Especifica o preenchimento em porcentagem da largura do elemento que contém

Então, talvez ele sempre use largura? Eu nunca tinha notado.

O que você está fazendo pode ser obtido usando display: table (pelo menos para navegadores modernos). A técnica é explicada aqui .

Este é um bug muito interessante. (Na minha opinião, é um bug de qualquer maneira) Bom achado!

Sobre como configurá-lo, eu recomendaria a resposta de Camilo Martin. Mas, por que , eu gostaria de explicar um pouco se vocês não se importam.

Nas especificações CSS encontrei:

Porcentagens 'padding' : referem-se à largura do bloco contendo

... o que é estranho, mas tudo bem.

Assim, com pai width: 210pxe filho padding-top: 50%, recebo um valor calculado / calculado de padding-top: 96.5px- que não é o esperado 105px.

Isso ocorre no Windows (não tenho certeza sobre outros sistemas operacionais), o tamanho das barras de rolagem comuns é por padrão 17px × 100%(ou 100% × 17pxpara barras horizontais). Aqueles 17pxsão subtraídos antes de calcular o 50%, portanto 50% of 193px = 96.5px.