wake-up-neo.net

CSS-Vollbild-Div mit Text in der Mitte

Ich habe eine CSS-Klasse definiert, so dass ich ein div machen kann, um den gesamten Ansichtsbereich 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 im div genau in der Mitte des Bildschirms befindet. Vertikal zentrieren und horizontal horizontal ausrichten, aber ich finde nicht den richtigen Weg.

Es muss nur mit Webkit-basierten Browsern gearbeitet werden.

Ich habe bereits versucht, ein P-Element hinzuzufügen, wobei display auf table-cell (eine übliche Art zum Zentrieren von Text) ohne Erfolg gesetzt wurde.

Irgendwelche Vorschläge?

htmlcsswebkit
27
Juan Alberto López Cavallotti

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; 
}​
40
paislee

Die akzeptierte Antwort funktioniert, aber wenn: 

  • sie kennen die Dimensionen 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 CSS-Tricks-Artikel .

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

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

Ein weiterer guter Leitfaden zu Flexboxs von CSS-Tricks. http://css-tricks.com/snippets/css/a-guide-to-flexbox/

30
agconti

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 zum vertikalen Ausrichten von Elementen, die keine Textzeile sind)
  • Hören auf window.resize und absolute Positionierung

EDIT: Wenn ich sage, dass es keine Lösung gibt, gehe ich davon aus, dass Sie die Größe des Blocks nicht wissen, um zu zentrieren. Wenn Sie es wissen, ist Paislees Lösung sehr gut

3
Samuel Rossille

text-align: center wird es horizontal zentrieren, wie für einen vertikalen Bereich, und geben Sie ihm eine margin:auto 0;-Adresse (wahrscheinlich müssen Sie dem Bereich auch eine display: block-Eigenschaft geben).

0
Ryan