-2

enter image description here

I have div-1 which contains div-2 and a heading inside. The size of div-2 varies. I want the HEADING to be correctly between the top of the two divs as shown in the picture, with different sizes of div-2. Would love to have it in pure css or scss. I have centered the div2 in div1 using top: 50%; left: 50% transform = translate (-50%, -50%)

but i can't center the 'heading' between the two 'divs'

I do not know the size of div-2. It keeps varying and I want the heading to be in the middle, unlike in the this where the size of the elements is known.

illiteratewriter
  • 4,155
  • 1
  • 23
  • 44
  • 2
    What have you tried? We are not here to make your homework (With your level, I guess you know that xD). – Jorge Fuentes González Apr 23 '18 at 11:20
  • I guess the HEADING is a nav or div, so try to style it with "width:100%" and as a simple block. With this the div2 will always under the HEADING. – DiabloSteve Apr 23 '18 at 11:24
  • @JorgeFuentesGonzález I know. :) The heading is another `div` but how do you vary the size of the `div` containing the heading to match the size between the two `divs`? You can't get the size of `div-2` otherwise we could've had calculated it using sass. I believe I've tried everything I know. – illiteratewriter Apr 23 '18 at 11:25
  • @DiabloSteve I don't want div2 under HEADING. I want `HEADING` to match the size between `div1` and `div2` and also `div2` to be at exact center of `div1` – illiteratewriter Apr 23 '18 at 11:26
  • This is not a duplicate because i do not know the size of `div2`. – illiteratewriter Apr 23 '18 at 11:56

1 Answers1

-2

It is better to use flexbox for this, div1 you put display: flex; flex-direction: column; align-items: center; justify-content: center;

Heading can be positioned absolute inside the div2 (position:relative), just set top value to -100px(example).

EDIT: However if you need the heading to be exactly in the middle, you need to use javascript to calculate the heights of these elements... (div1 - div2) / 2 = top space. So then top space - font size/2 is margin top of heading... hope you get it

Nemanja Grabovac
  • 858
  • 2
  • 15
  • 30