Hey,
da ich schon öfters (auch auf anderen Seiten) die Frage gesehen habe, wie man denn einen Div zentriert, der sagen wir mal 40% der Breite des Fensters und 20% der Höhe des Fensters einnehmen soll. Viele benutzen einfach so die Lösung via Javascript, indem sie dem Div Top und Left auf 50% setzen und dann margins abziehen. Die Möglichkeit geht natürlich, ist aber nicht optimal, da man ja auch Javascript ausschalten kann und eine Website optimalerweise auch ohne Javascript laufen sollte. Wäre doch super, wenn man das mit 100% CSS realisieren könnte, oder?
Das geht und ist auch nicht schwer, wenn man weiß wie es geht.
Hier habt ihr ein Beispiel:
HTML:
CSS:
Hier habt ihr eine Demo: http://codepen.io/chriscoyier/pen/BvdgL
Zur Information:
Die Idee stammt nicht von mir, sie ist von folgendem Forum (https://css-tricks.com/centering-percentage-widthheight-elements/) wollte sie aber auch hier öffentlich stellen da ich es total nütlich finde, denn wer kennt das Problem bitte nicht?
da ich schon öfters (auch auf anderen Seiten) die Frage gesehen habe, wie man denn einen Div zentriert, der sagen wir mal 40% der Breite des Fensters und 20% der Höhe des Fensters einnehmen soll. Viele benutzen einfach so die Lösung via Javascript, indem sie dem Div Top und Left auf 50% setzen und dann margins abziehen. Die Möglichkeit geht natürlich, ist aber nicht optimal, da man ja auch Javascript ausschalten kann und eine Website optimalerweise auch ohne Javascript laufen sollte. Wäre doch super, wenn man das mit 100% CSS realisieren könnte, oder?
Das geht und ist auch nicht schwer, wenn man weiß wie es geht.
Hier habt ihr ein Beispiel:
HTML:
HTML:
<div id="zentriert">
Hier der Text wird immer 100%tig in der Mitte einer Seite zentriert sein!
</div>CSS:
Code:
#zentriert {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40%; /* Hier einsetzen, was auch immer ihre wollt */
height: 50%; /* Ebenfalls einsetzen, was auch immer ihre wollt, wenn die Höhe überhaupt nötig ist */
padding: 20px;
background: rgba(0,128,128, .8);
color: white;
text-align: center;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}Hier habt ihr eine Demo: http://codepen.io/chriscoyier/pen/BvdgL
Zur Information:
Die Idee stammt nicht von mir, sie ist von folgendem Forum (https://css-tricks.com/centering-percentage-widthheight-elements/) wollte sie aber auch hier öffentlich stellen da ich es total nütlich finde, denn wer kennt das Problem bitte nicht?
