/ / Umiestniť div v priestore medzi dvoma divs jeden vnútri druhý [duplicate] - html, css, css3, flexbox

Umiestnite div v priestore medzi dvoma divs jeden vnútri druhého [duplicate] - html, css, css3, flexbox

tu zadajte popis obrázku

mám div-1 ktorý obsahuje div-2 a názov vo vnútri. Veľkosť súboru div-2 líšia. Chcem, aby bol HEADING správne medzi hornou časťou dvoch divov, ako je znázornené na obrázku, s rôznymi veľkosťami div-2, Rád by to mať v čistom css alebo scss. Som sa sústredil na div2 v div1 použitím top: 50%; left: 50% transform = translate (-50%, -50%)

ale nemôžem "zamerať" nadpis "medzi dvoma" divs "

Nepoznám veľkosť div-2, Stále sa menia a chcem, aby hlavička bola v strede, na rozdiel od toto kde je známa veľkosť prvkov.

odpovede:

-2 pre odpoveď č. 1

Je lepšie použiť flexbox pre toto, div1 si dal display: flex; flex-direction: column; align-items: center; justify-content: center;

Okruh môže byť umiestnený vo vnútri absolútnu div2 (pozícia: relatívna), stačí nastaviť hornú hodnotu -100px (príklad).

EDIT: Avšak, ak potrebujete uvedený nadpis byť presne v strede, je nutné použiť JavaScript na výpočet výšky týchto prvkov ... (DIV1 - div2) / 2 = horný priestor. Takže najvyšší priestor - veľkosť písma / 2 je okrajová vrstva nadpisu ... dúfam, že to dostanete