@Bader-Idris
Posted
You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:
.container {
display: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful
Marked as helpful
@skopelosbill
Posted
Hi @Bader-Idris, thanks for the helpful comment. I am going to try this later on and I will see what effect it has. But let me theorise…. The top:50%; and left:50%; respectively move the whole container such that the top left hand corner is in the center of the screen (whatever size of screen) and then the transform: translate(-50%, -50%); moves the container up and left 50% of the container dimensions, thus placing the central point of the container on the central point of the screen. If I have got this right, that is something I hadn’t understood about transform before now and is fantastically useful to me and probably to several other newbies on the site.
Thanks so much mate.
Skopelosbill
Much later... It did work and it did turn out to do what I thought it would. However it also had unexpected consequences, not least of which was it moved the attribution to the top of the site. I really don't understand how that happened, also in order to get everything working properly (with the exception of the attribution) I had to make other changes which altered my padding. In the end I got to the stage where I couldn't figure out how to fix what I had done so I will leave it as it is now and perhaps come back to it at a future date when I have gained more experience. Thank you for your help, I do appreciate it and am sure I will be using those 4 lines of code again!
By the way... isn't supposed to be position: absolute; rather than display: absolute;?
@Bader-Idris
Posted
@skopelosbill
yes it is position not display, my bad!
if you have problems with padding and border not being counted when working with elements, you can add this property box-sizing: border-box; to * representing to all HTML elements, it amends the problems making it count border and padding in elements themselves
Marked as helpful
