0

I have a div inside another div.

I want to make the inside one in the middle vertically.

I can use this way to achieve it:

calc(50% - 100px ) /* if the height of the inside box is 100px */

However, sometimes the inside box has a variable height, so I want to use something like this:

calc(50% - height )
calc(50% - attr(height) )
calc(50% - this(height) )

I tried many ways but can't succeed. Just like the picture below. It should be placed in the middle between the two thick srokes.

enter image description here

May I know how I can just retrieve the height value inside calc() function?

Update: I tried this according to jsotola's comment. But it says the property value is invalid.

enter image description here

Thanks

AGamePlayer
  • 7,404
  • 19
  • 62
  • 119
  • `can't succeed` is a very poor description of what you observe ... I did a search for `css calc()` and the first hit pointed to an example .............. you really need to think about the result of `50% - height` – jsotola Nov 01 '20 at 02:26
  • Sorry I can't quite catch you. In the picture I uploaded, the height is the height of the red box. It should be a fixed number like `235.4px` and the number is what I need to make the `calc()` works. I just don't know how to find the number with pure CSS. I don't want to get JavaScript involved. – AGamePlayer Nov 01 '20 at 02:52
  • I mean, I don't want to put an actual number in the formula. I want to use a variable instead, because with the content inside it, the height might change. – AGamePlayer Nov 01 '20 at 03:25
  • you are still not getting it ...... please answer this .... `what is the result of 5 - 10?` – jsotola Nov 01 '20 at 03:30
  • sorry could you be more specific? – AGamePlayer Nov 01 '20 at 05:26
  • simple arithmetic question ... what is 5 - 10? – jsotola Nov 01 '20 at 05:47
  • what does 5-10=-5 have anything to do with the question? – AGamePlayer Nov 01 '20 at 06:26
  • what is 50% - 100%? .... as in calc(50% - height ) – jsotola Nov 01 '20 at 06:28
  • if the 'height' is 100%, then how do I get the 'px height'? – AGamePlayer Nov 01 '20 at 06:39

0 Answers0