マージンまたはパディングを親コンテナの高さのパーセンテージとして設定するにはどうすればよいですか？

私はCSSで垂直方向の配置を作成することに頭を悩ませていました

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

これはこのケースでは機能しているように見えましたが、ベースdivの幅を拡大または縮小すると、垂直方向の配置がスナップすることに驚きました。padding-topプロパティを設定すると、パディングは親コンテナの高さのパーセンテージとして取得されると予想していましたが、これはこの場合のベースですが、上記の50％の値は、幅。:(

JavaScriptを使用せずに、パディングやマージンを高さのパーセンテージとして設定する方法はありますか？

修正は、はい、垂直パディングとマージンの幅を基準にしていますが、ということであるtopとbottom されません。

したがって、divを別のdivの内部に配置し、内部のdivで次のようなものを使用しますtop:50%（positionそれでも機能しない場合は重要です）

少し異なる質問への回答：vhユニットを使用して、要素をビューポートの中央に埋め込むことができます。

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

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

必要な動作をエミュレートする2つのオプションを次に示します。一般的な解決策ではありませんが、場合によっては役立つことがあります。ここでの垂直方向の間隔は、親ではなく外部要素のサイズに基づいて計算されますが、このサイズ自体は親に相対的であり、このようにして間隔も相対的になります。

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

最初のオプション：疑似要素を使用します。ここで、垂直方向と水平方向の間隔は、外側を基準にしています。デモ

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

水平方向の間隔を外側の要素に移動すると、外側の親に対して相対的になります。デモ

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

2番目のオプション：絶対配置を使用します。デモ

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

子要素を親要素から絶対的に配置するには、親要素の相対位置と子要素の絶対位置を設定する必要があります。

次に、子要素の 'top'は親の高さを基準にします。したがって、子供を自分の身長の50％上方に「平行移動」する必要もあります。

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

フレックスボックスを使用する別のソリューションがあります。

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

あなたは両方の利点/欠点を見つけるでしょう。

これはwriting-modeプロパティで実現できます。要素writing-modeをなどの縦書きモードに設定するとvertical-lr、その子孫のパディングとマージンのパーセント値は、両方の次元で、幅ではなく高さに相対的になります。

仕様から：

。。。マージンとパディングプロパティのパーセンテージは、常にCSS2.1の包含ブロックの幅を基準にして計算されますが、CSS3の包含ブロックのインラインサイズを基準にして計算されます。

インラインサイズの定義：

インライン寸法の測定値：横書きモードの物理的な幅（水平寸法）、および縦書きモードの物理的な高さ（垂直寸法）を指します。

例：サイズ変更可能な要素で、水平マージンは幅を基準とし、垂直マージンは高さを基準とします。

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

縦書きモードの使用は、要素の縦横比を一定にしたいが、幅ではなく高さに応じてサイズを拡大したい場合に特に役立ちます。

1行のテキストを中央揃えにする別の方法は次のとおりです。

.parent{
  position: relative;
}

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

あるいは単に

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

50％のパディングは子供を中央に配置せず、中央の下に配置します。あなたは本当に25％のパディングトップが欲しいと思います。コンテンツが高くなると、スペースが足りなくなるだけでしょうか？また、パディングトップの代わりにマージントップを設定してみましたか？

編集：ネバーマインド、w3schoolsサイトは言う

％含まれる要素の幅のパーセントでパディングを指定します

それで、おそらくそれは常に幅を使用しますか？気づかなかった。

あなたがやっていることは、display：tableを使って達成できます（少なくとも最近のブラウザでは）。テクニックはここで説明されています。

これは非常に興味深いバグです。（私の意見では、とにかくそれはバグです）いい発見です！

設定方法については、カミロ・マーティンの答えをお勧めします。しかし、理由については、皆さんが気にしない場合は少し説明したいと思います。

ではCSSの仕様 Iが見つかりました：

'パディング'
パーセンテージ： 包含ブロックの幅を参照

…これは奇妙ですが、大丈夫です。

だから、親width: 210pxと子でpadding-top: 50%、私は計算された/計算された値を得ますpadding-top: 96.5px-これは期待されていません105px。

これは、Windows（他のOSについてはわかりません）では、一般的なスクロールバーのサイズがデフォルト17px × 100%（または100% × 17px水平バー）であるためです。これら17pxは、を計算する前に差し引かれます。50%50% of 193px = 96.5px