/ / Umieść div w przestrzeni między dwoma elementami div jeden wewnątrz drugiego [duplicate] - html, css, css3, flexbox

Umieść div w przestrzeni między dwoma elementami div jeden wewnątrz drugiego [duplicate] - html, css, css3, flexbox

wprowadź opis obrazu tutaj

mam div-1 który zawiera div-2 i nagłówek w środku. Rozmiar div-2 różni się. Chcę, aby HEADING był poprawnie między wierzchołkami dwóch div, jak pokazano na rysunku, o różnych rozmiarach div-2. Chciałbym mieć go w czystej css lub scss. Wyśrodkowałem div2 w div1 za pomocą top: 50%; left: 50% transform = translate (-50%, -50%)

ale nie mogę wyśrodkować "nagłówka" między dwoma elementami "div"

Nie znam rozmiaru div-2. Różni się i chcę, aby nagłówek był pośrodku, w przeciwieństwie do nagłówka to gdzie znana jest wielkość elementów.

Odpowiedzi:

-2 dla odpowiedzi № 1

Lepiej jest używać flexbox do tego, div1, które umieściłeś display: flex; flex-direction: column; align-items: center; justify-content: center;

Nagłówek może być pozycjonowany absolutnie wewnątrz div2 (position: relative), wystarczy ustawić najwyższą wartość na -100px (przykład).

EDYTOWAĆ: Jeśli jednak chcesz, aby nagłówek był dokładnie w środku, musisz użyć javascript do obliczenia wysokości tych elementów ... (div1 - div2) / 2 = górna przestrzeń. A więc górna przestrzeń - rozmiar czcionki / 2 to margines góry nagłówka ... mam nadzieję, że ją zdobędziesz