CSS-Vollbild-Div mit Text in der Mitte [duplicate]

Lesezeit: 3 Minuten

Ich habe eine CSS-Klasse definiert, damit ich ein div erstellen kann, um den gesamten Darstellungsbereich des Browsers zu verwenden. Die Regel lautet wie folgt:

.fullscreenDiv {
    background-color: #e8e8e8;
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

Jetzt möchte ich, dass sich der Text innerhalb des div genau in der Mitte des Bildschirms befindet, also vertikal in der Mitte und horizontal in der Mitte ausrichten, aber ich kann anscheinend nicht den richtigen Weg dafür finden.

Es muss nur auf Webkit-basierten Browsern funktionieren.

Ich habe bereits versucht, ein P-Element mit hinzuzufügen display einstellen table-cell (eine übliche Methode zum Zentrieren von Text) ohne Glück.

Irgendwelche Vorschläge?

  • text-align: center; position: absolute; top: 50%; bottom: 50%; width: 100%; – Dies sollte besser funktionieren als die akzeptierte Antwort – Fügen Sie die Stile zu Ihrem Text hinzu

    – James111

    23. Februar 2016 um 23:30 Uhr

Benutzer-Avatar
Agconti

Die akzeptierte Antwort funktioniert, aber wenn:

  • Sie kennen die Abmessungen des Inhalts nicht
  • Der Inhalt ist dynamisch
  • Sie wollen zukunftssicher sein

benutze das:

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

Weitere Informationen zum Zentrieren von Inhalten in diesem ausgezeichneten Artikel zu CSS-Tricks.


Auch wenn Sie alte Browser nicht unterstützen müssen: Eine Flex-Box macht dies zu einem Kinderspiel:

.center{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Eine weitere großartige Anleitung zu Flexboxen von CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Benutzer-Avatar
calebds

Der Standardansatz besteht darin, dem zentrierten Element feste Abmessungen zu geben und es absolut zu platzieren:

<div class="fullscreenDiv">
    <div class="center">Hello World</div>
</div>​

.center {
    position: absolute;
    width: 100px;
    height: 50px;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* margin is -0.5 * dimension */
    margin-top: -25px; 
}​

  • Ich versuche es damit, aber wenn ich den Text auch in der Mitte des “center” div zentrieren wollte?

    – Juan Alberto López Cavallotti

    22. Mai 2012 um 18:06 Uhr

  • @JuanAlbertoLópezCavallotti Sie würden das Problem nur reproduzieren. Hinzufügen text-align: center zum center Klasse würde Sie auf halbem Weg dorthin bringen. Wenn es nur 1 Textzeile ist, können Sie hinzufügen line-height: 50px, oder was auch immer die Höhe des zentrierten Containers ist. Dadurch wird es auch vertikal zentriert.

    – calebds

    22. Mai 2012 um 18:10 Uhr


  • Ich bin mir nicht sicher, ob das zusätzliche Element benötigt wurde, aber los geht’s: jsfiddle.net/wzSmc/1

    – FelipeAls

    22. Mai 2012 um 18:12 Uhr

  • @JuanAlbertoLópezCavallotti aktualisierte DEMO: jsfiddle.net/paislee/wzSmc/2

    – calebds

    22. Mai 2012 um 18:15 Uhr

  • Danke @paislee, das hat mein Problem gelöst, es sieht richtig aus und das zählt!

    – Juan Alberto López Cavallotti

    22. Mai 2012 um 18:21 Uhr

Benutzer-Avatar
Samuel Rossille

Für dieses klassische Problem gibt es keine reine CSS-Lösung.

Wenn Sie dies erreichen möchten, haben Sie zwei Lösungen:

  • Verwenden einer Tabelle (hässlich, nicht semantisch, aber die einzige Möglichkeit, Dinge vertikal auszurichten, die keine einzelne Textzeile sind)
  • Abhören von window.resize und absoluter Positionierung

BEARBEITEN: Wenn ich sage, dass es keine Lösung gibt, gehe ich davon aus, dass Sie die Größe des zu zentrierenden Blocks nicht im Voraus kennen. Wenn Sie es wissen, ist Paislees Lösung sehr gut

text-align: center wird es horizontal zentrieren wie vertikal in eine Spanne legen und ihm ein CSS geben margin:auto 0; (Sie werden wahrscheinlich auch die Spanne a geben müssen display: block Eigentum)

1227530cookie-checkCSS-Vollbild-Div mit Text in der Mitte [duplicate]

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy