/ / div内の2つのdivsの間のスペースにdivを配置する[duplicate] - html、css、css3、flexbox

2つのdivの間のスペースにdivを配置する[duplicate] - html、css、css3、flexbox

ここに画像の説明を入力

私が持っています div-1 を含む div-2 内側に見出しがあります。サイズ div-2 不定。写真のように2つのdivの上端の間にHEADINGを正しく配置したい div-2。純粋なCSSまたはscssでそれを持っているのが大好きです。私は div2div1 を使用して top: 50%; left: 50% transform = translate (-50%, -50%)

2つの "div"の間に "見出し"を配置することはできません

私はサイズがわからない div-2。それは変化し続ける、私は見出しが中央にあるのとは違って、 この ここで要素のサイズは既知である。

回答:

回答№1では-2

これにはflexboxを使う方がいいです、div1 display: flex; flex-direction: column; align-items: center; justify-content: center;

見出しはdiv2内で絶対位置に配置できます(相対:position)。先頭の値を-100px(例)に設定します。

編集: しかし、見出しを真ん中に配置する必要がある場合は、javascriptを使用してこれらの要素の高さを計算する必要があります。(div1-div2)/ 2 = top space。だからトップスペース - フォントサイズ/ 2が見出しの先頭です...あなたがそれを得ることを願っています