When you are unlucky, you have to start your web developer life with a login-dialog that needs to be centered, and you are not given time to learn "on the job" how complicated this is.
Being clever, you get from the web what the web demands from you. Centering was documented compoundly by various web sites:
This Blog is about centering both horizontally and vertically.
A login-dialog must be centered both horizontally and vertically, relative to the page container. To achieve this, you need to stretch the page container to the height of the browser window. See my according Blog how to do this without side-effects:
html, body { height: 100%; padding: 0; margin: 0; overflow: hidden; }
In the following I will refer to an arbitrary parent container,
which also could be the body element.
That means, you need the page stretching CSS above just in cases like a login-dialog,
but you can apply the techniques introduced here everywhere in an HTML page.
Example HTML
Use this for experimenting on CodePen or JsFiddle.
<!DOCTYPE html> <html> <head> <title>Centering</title> <style type="text/css"> /* write CSS rules here */ </style> </head> <body> <div style="border: 1px solid green; width: 400px; height: 200px;"> <div class="center-parent" style="border: 1px solid red;"> <div class="center" style="background-color: silver;"> <p>This must be centered!</p> </div> </div> </div> </body> </html>
In the <style> element in <head> you should paste
the CSS that I will introduce in the following.
The reason why there are three levels of nested div elements is
that I wanted to show that not every parent element up to root
needs to carry the center-parent CSS class.
The first of the three nested div elements is a sized container,
its children will be centered relatively to it.
Centering needs treatment of the parent of the element to center,
thus there are two more nested elements, marked with two CSS classes:
center-parentmust be put onto the direct parent of the element to centercentermust be put onto the element to center
Now let's implement these CSS classes.
Centering by display: flex
This is the most elegant way to do it. Drawback is that older browsers do not support it.
.center-parent { display: flex; justify-content: center; align-items: center; height: 100%; }
Notice that the center CSS class was not used.
It is not necessary in this variant. Which makes it my favorite.
The 100% height on the parent is needed, but 100% width is not needed for
block elements.
(Mind that there is a
difference
between 100% width and the default "auto" width of a block-element.)
Centering by transform: translate
Yes it's true, you need 2D instructions to achieve centering in CSS.
This variant will work also on older browsers,
but you may need to provide
browser-specific names
for the transform property.
.center-parent { height: 100%; } .center { display: inline-block; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }
In this variant you need to put the according CSS classes onto the parent and the centered element.
The parent needs to have 100% height.
The element to center needs to have display: inline-block to give it its natural size,
i.e. not spanning the whole width by default.
Then it must be changed to position: relative, so that you can move it.
You place its top right corner to the middle of the parent,
finally the transform calculates the element's dimension and moves it to where it should be.
Proof of Concept
Here comes above code in action (the transform - translate variant):
This must be centered!
There are also other ways to center, e.g. display: table on the parent
with display: table-cell on the child,
but this puts uncomfortable constraints onto the children of the centered element.
Keine Kommentare:
Kommentar veröffentlichen