Why is it not working properly on my mobile phone ??

Question

The container is vertically middle aligned on my pc with this code on my phone, it is not. I have Moto g6 with Android Oreo.
https://code.sololearn.com/WR2UQCLE0Go7/?ref=app

Answer 1

1. Quick solution

Body { height: 100vh;}

https://code.sololearn.com/WA1vZWTokkSl/?ref=app

2. Explanation

Child top 50% is % of parent. So adjust parent height.
Parent may not be body, sometimes div.

3. Note

If you want to make a square, the units is vmin or vmax

https://code.sololearn.com/WOOSPW73N3Cr/?ref=app

4. Supplement

https://code.sololearn.com/W3gS00IGw160/?ref=app

Answer 2

this worked for me, adding

-webkit-transform: translateY(-50%);

to the div