Div auf ganzer Seite horizontal und vertikal zentrieren UND Element darunter platzieren

  • CSS

Es gibt 8 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    Div auf ganzer Seite horizontal und vertikal zentrieren UND Element darunter platzieren

    Ich habe ein Div, welches ich auf der gesamten Seite, d. h. im ganzen Viewport des Browsers, sowohl horizontal als auch vertikal zentrieren möchte. Das habe ich hinbekommen. Nun möchte ich aber noch ein Footer-Element (hier eine kurze Textzeile) darunter platzieren.

    Das Problem ist aber, dass ich das zentrierte Div auf position:absolute setzen musste, damit die Zentrierung klappt. Dadurch wird das Div natürlich aus dem Fluss der Seite genommen und ein darunter platziertes Element ist dann ganz oben. Das Element darunter auch absolut zu platzieren wird nicht gehen, da ich die nötige Position nicht kenne. Ich kenne lediglich die Höhe des zentrierten Divs, nicht aber dessen Bottom-Position.

    Hier eine auf das nötigste abgespeckte Version der Website (die fragliche Absolutpositionierung ist hier):

    HTML-Quellcode

    1. <main>
    2. <div class="vcard clearfix">
    3. <div id="col-bottom-left">
    4. <p>Visitenkarte</p>
    5. </div>
    6. </div>
    7. </main>
    8. <footer>
    9. <p><b>Text unten drunter!</b></p>
    10. </footer>

    CSS-Quellcode

    1. .vcard {
    2. margin: 0 auto;
    3. display: table;
    4. width: 100%;
    5. }
    6. div[id^="col-"] {
    7. width: 100%;
    8. }
    9. .clearfix::after {
    10. content: "";
    11. clear: both;
    12. display: block;
    13. }
    14. @media (min-width: 25em) {
    15. body {
    16. font-size: 100%;
    17. }
    18. .vcard {
    19. margin: 5% auto;
    20. border: 0.05em solid #005596;
    21. width: 15em;
    22. }
    23. }
    24. @media (min-width: 45em) {
    25. div[id^="col-"] {
    26. width: 50%;
    27. float: left;
    28. }
    29. .vcard {
    30. margin: 0 auto;
    31. width: 30em;
    32. height: 19em;
    33. position: absolute;
    34. top: 50%;
    35. left: 50%;
    36. transform: translate(-50%, -50%);
    37. display: block;
    38. }
    39. div[id^="col-"] {
    40. height: 9em;
    41. }
    42. }

    Hier auch direkt zum Testen/Bearbeiten bei JSFiddle: jsfiddle.net/o7r0cvgc/

    Achtung: Das ganze ist responsive! Sollte der Text oben sein, so ist das Fenster zu klein! In der Mobilansicht ist der Footer korrekterweise unten.

    Ich denke, meine Frage sollte nicht lauten, wie ich den Footer nach unten bekomme, sondern wie ich das Visitenkarten-Div (mit dem Rahmen) auf der Seite zentriert bekomme, ohne eine absolute Position zu setzen.

    Hat jemand eine Idee?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Meinst das so?

    HTML-Quellcode

    1. <!Doctype HTML>
    2. <html>
    3. <head>
    4. <style>
    5. html, body {
    6. margin: 0;
    7. padding: 0;
    8. width: 100%;
    9. height: 100%;
    10. display: table
    11. }
    12. #main {
    13. display: table-cell;
    14. vertical-align: middle;
    15. }
    16. #footer{
    17. text-align: center;
    18. }
    19. .vcard {
    20. margin: auto;
    21. border: 0.05em solid #005596;
    22. width: 30em;
    23. height: 19em;
    24. }
    25. </style>
    26. </head>
    27. <body>
    28. <div id="main">
    29. <div class="vcard">
    30. <p>Visitenkarte</p>
    31. </div>
    32. <div id="footer">
    33. <p><b>Text unten drunter!</b></p>
    34. </div>
    35. </div>
    36. </body>
    37. </html>
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin
    Danke, dein Beispiel erzeugt auf jeden Fall das Ergebnis, was ich haben möchte. Allerdings stört mich eine Sache. Du hast den Footer innerhalb des Main-Bereichs. Aber Main ist Main und Footer ist Footer. ;)

    Für ein korrektes Layout muss der Footer unterhalb des Main-Divs (bzw. ich verwende den HTML5-Tag "main" (und "footer")).

    Dann klappt es aber nicht mehr.

    Hast du noch eine Idee?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Edit: @Marcus Gräfe habe noch mal editiert, so ist es richtig:

    HTML-Quellcode

    1. <!Doctype HTML>
    2. <html>
    3. <head>
    4. <style>
    5. html {
    6. margin: 0;
    7. padding: 0;
    8. width: 100%;
    9. height: 100%;
    10. display: table;
    11. }
    12. body{
    13. display: table-cell;
    14. vertical-align: middle;
    15. }
    16. footer{
    17. text-align: center;
    18. }
    19. .vcard {
    20. margin: auto;
    21. border: 0.05em solid #005596;
    22. width: 30em;
    23. height: 19em;
    24. }
    25. </style>
    26. </head>
    27. <body>
    28. <main>
    29. <div class="vcard">
    30. <p>Visitenkarte</p>
    31. </div>
    32. </main>
    33. <footer>
    34. <p><b>Text unten drunter!</b></p>
    35. </footer>
    36. </body>
    37. </html>

    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin
    Genial! Das klappt! :) Vielen Dank!

    Das löst sogar ein anderes Problem, welches ich vorhin erst gesehen habe. Und zwar wurde bei vertikaler Verkleinerung des Browserfensters irgendwann die Visitenkarte oben aus dem Bild geschoben. Die bleibt nun bei Position 0.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Geht natürlich auch, aber wie kann man nun verhindern, das die Y-Position des Main-Elements negativ wird?(Oben aus dem sichbaren Bereich verschwindet, wenn man die höhe des Browserfenster recht klein macht)

    HTML-Quellcode

    1. <!Doctype HTML>
    2. <html>
    3. <head>
    4. <style>
    5. html {
    6. margin: 0;
    7. padding: 0;
    8. width: 100%;
    9. height: 100%;
    10. }
    11. body{
    12. flex-direction: column;
    13. height: 100%;
    14. display: -webkit-box;
    15. display: -moz-box;
    16. display: -ms-flexbox;
    17. display: -webkit-flex;
    18. display: flex;
    19. align-items: center;
    20. justify-content: center;
    21. }
    22. footer{
    23. text-align: center;
    24. }
    25. .vcard {
    26. margin: auto;
    27. border: 0.05em solid #005596;
    28. width: 30em;
    29. height: 19em;
    30. }
    31. </style>
    32. </head>
    33. <body>
    34. <main>
    35. <div class="vcard">
    36. <p>Visitenkarte</p>
    37. </div>
    38. </main>
    39. <footer>
    40. <p><b>Text unten drunter!</b></p>
    41. </footer>
    42. </body>
    43. </html>
    Cloud Computer? Nein Danke! Das ist nur ein weiterer Schritt zur totalen Überwachung.
    „Wer die Freiheit aufgibt, um Sicherheit zu gewinnen, wird am Ende beides verlieren.“
    Benjamin Franklin

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „NoIde“ ()

    Gelöschter Benutzer schrieb:

    Warum wird hier nicht mit Flexbox gearbeitet?

    Wegen des vergleichsweise schlechten Browsersupports. IE < 11 geht anscheinend nicht.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum
    Ich wollte mich nun doch mal mit Flexbox beschäftigen, aber es besteht natürlich genau dieses Problem:

    NoIde schrieb:

    aber wie kann man nun verhindern, das die Y-Position des Main-Elements negativ wird?

    Ist das quasi ein Bug von Flexbox? Also eine nicht zuende gedachte Sache?

    EDIT: Man soll bei allen (direkten) Divs innerhalb des Flex-Containers margin: auto; machen, anstatt diesem hier beim Container:

    CSS-Quellcode

    1. align-items: center;
    2. justify-content: center;

    Dann geht's.
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von „Marcus Gräfe“ ()