I hope u can help me with this follow up question.
I read that if u have a flex container and u use margin:auto on an item it centers both horizontally and vertically. Why doesn’t it work in my pen? (Body is set as flex, and the div ‘calc’ is set to margin:auto.)
Even though the ‘calc’ container is set to have:
flex-basis: 460px;
align-content: space-between;
There is very little space between the screen and the keyboard. Why? What is the solution?
Percent centering only works if the container has a associated height in the parent container.
In your case, if you put an outline in your body, which is the container for the calc, you’ll know if it is being centered or not.
<body style="outline:2px solid white;">
</body>
If you want it to be centered of the screen. Then the parent of “calc” will have to have width and height of 100%