it-swarm.com.de

Wie zentriere ich Text mit CSS vertikal?

Ich habe ein div-Element, das Text enthält, und ich möchte den Inhalt dieses div vertikal zentrieren.

Hier ist mein Div-Stil:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Wie geht das am besten?

2139

Sie können diesen grundlegenden Ansatz ausprobieren:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Es funktioniert jedoch nur für eine einzelne Textzeile, da wir die Höhe der Zeile auf dieselbe Höhe wie das Box-Element festlegen, das sie enthält.


Ein vielseitigerer Ansatz

Dies ist eine weitere Möglichkeit, Text vertikal auszurichten. Diese Lösung funktioniert für eine einzelne Zeile und mehrere Textzeilen, erfordert jedoch weiterhin einen Container mit fester Höhe:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Das CSS bemisst nur den <div>, zentriert den <span> vertikal, indem es die Zeilenhöhe des <div> gleich seiner Höhe setzt, und macht den <span> zu einem Inline-Block mit vertical-align: middle. Dann wird die Zeilenhöhe für den <span> auf den Normalwert zurückgesetzt, sodass der Inhalt auf natürliche Weise im Block fließt.


Tabellendarstellung simulieren

Und hier ist eine weitere Option, die möglicherweise nicht mit älteren Browsern funktioniert, die display: table und display: table-cell nicht unterstützen (im Grunde nur Internet Explorer 7). Mit CSS simulieren wir das Verhalten von Tabellen (da Tabellen die vertikale Ausrichtung unterstützen), und der HTML-Code ist derselbe wie im zweiten Beispiel:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

Mit absoluter Positionierung

Diese Technik verwendet eine absolut positionierte Elementeinstellung von oben, unten, links und rechts auf 0. Sie wird in einem Artikel im Smashing Magazine Absolut horizontal und detaillierter beschrieben Vertikale Zentrierung in CSS.

2724

Ein anderer Weg (hier noch nicht erwähnt) ist mit Flexbox .

Fügen Sie dem container -Element einfach den folgenden Code hinzu:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Flexbox Demo 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Anstatt den Inhalt über den Container auszurichten, kann flexbox auch das a flex item mit einem zentrieren. auto margin wenn sich nur ein Flex-Item im Flex-Container befindet (wie im obigen Beispiel).

Um das Flex-Objekt horizontal und vertikal zu zentrieren, setzen Sie es einfach mit margin:auto

Flexbox Demo 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Alles oben Genannte gilt für das Zentrieren von Objekten, während diese in horizontalen Reihen angeordnet werden. Dies ist auch das Standardverhalten, da der Wert für flex-direction standardmäßig row ist. Wenn jedoch Flex-Items in vertikale Spalten angeordnet werden müssen, sollte flex-direction: column auf dem Container gesetzt werden, um die Hauptachse als Spalte und zusätzlich den justify-content zu setzen. und align-items -Eigenschaften funktionieren jetzt umgekehrt , wobei justify-content: center vertikal und align-items: center horizontal zentriert werden)

flex-direction: column Demo

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Ein guter Ort, um mit Flexbox zu beginnen, um einige seiner Funktionen zu sehen und Syntax für maximale Browserunterstützung zu erhalten, ist flexyboxes

Auch die Browser-Unterstützung ist heutzutage sehr gut: caniuse

Für die browserübergreifende Kompatibilität von display: flex und align-items können Sie Folgendes verwenden:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
1174
Danield

Sie können dies einfach tun, indem Sie den folgenden CSS-Code hinzufügen:

display: table-cell;
vertical-align: middle;

Das bedeutet, dass Ihr CSS endlich so aussieht:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>
129
Ariful Islam

Zum Nachschlagen und um eine einfachere Antwort hinzuzufügen:

Reines CSS:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Oder als SASS/SCSS-Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Verwendung durch:

.class-to-center {
    @include vertical-align;
}

Von Sebastian Ekströms Blogpost Vertikale Ausrichtung mit nur 3 Zeilen CSS:

Diese Methode kann dazu führen, dass Elemente unscharf werden, da sie auf einem „halben Pixel“ platziert werden. Eine Lösung hierfür besteht darin, das übergeordnete Element auf preserve-3d zu setzen. Wie folgt:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Wir leben in 2015+ und Flex Box wird von allen gängigen modernen Browsern unterstützt.

Es wird die Art und Weise sein, wie Webseiten von hier an erstellt werden.

Lerne es!

115
BAR

Das gesamte Guthaben geht an diesen Link-Inhaber @Sebastian Ekström Link ; Bitte gehen Sie dies durch. Sehen Sie es in Aktion codepen . Durch das Lesen des obigen Artikels habe ich auch eine Demo-Geige erstellt.

Mit nur drei Zeilen CSS (ohne Herstellerpräfixe) können wir dies mithilfe einer Transformation tun: translateY zentriert vertikal, was immer wir wollen, auch wenn wir die Höhe nicht kennen.

Die CSS-Eigenschaftstransformation wird normalerweise zum Drehen und Skalieren von Elementen verwendet. Mit der translateY-Funktion können wir jetzt Elemente vertikal ausrichten. Normalerweise muss dies mit absoluter Positionierung oder Einstellung von Zeilenhöhen erfolgen, wobei Sie jedoch entweder die Höhe des Elements kennen müssen oder nur einzeiligen Text usw. bearbeiten müssen.

Dazu schreiben wir:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

Das ist alles was Sie brauchen. Es ist eine ähnliche Technik wie die Absolutpositionsmethode, aber mit dem Vorteil, dass wir keine Höhe für das Element oder die Positionseigenschaft für das übergeordnete Element festlegen müssen. Es funktioniert sofort, auch in Internet Explorer 9 !

Um es noch einfacher zu machen, können wir es als Mixin mit den Herstellerpräfixen schreiben.

61
ankitd

Flexboxes, die in CSS3 eingeführt wurden, sind die Lösung:

/* Important */
section {
    display: flex;
    display: -webkit-flex;
}
p {
    /* Key Part */
    margin: auto;
}


/* Unimportant, coloring and UI */
section {
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}
p {
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
<section>
    <p>
        I'm centered!<br/>
        Flexboxes are great!
    </p>
</section>

Tipp: Ersetzen Sie die Zeile, die als "Schlüsselteil" markiert ist, durch eine dieser Zeilen, wenn Sie den Text zentrieren möchten:

1) Nur vertikal:

margin: auto 0;

2) Nur horizontal:

margin: 0 auto;

Wie ich bemerkt habe, funktioniert dieser Trick auch mit Gittern (d. H. display: grid).

41
MAChitgarha

Flexibler Ansatz

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom: 5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>
22
Jürg

Die als Antwort akzeptierte Lösung ist perfekt, um line-height zu verwenden, das entspricht der Höhe von div, aber diese Lösung funktioniert nicht perfekt, wenn der Text in zwei Zeilen umbrochen wird OR.

Versuchen Sie dies, wenn der Text umbrochen ist oder sich in einem div in mehreren Zeilen befindet.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Weitere Informationen finden Sie unter:

18
Pranav Singh

Versuchen Sie diese Lösung :

.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

Erstellt mit CSS + .

14
Marco Allori

Sie können den folgenden Codeausschnitt als Referenz verwenden. Es wirkt für mich wie ein Zauber:

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Vertically Center Text</title>
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
        body {
            display: table;
        }
        .centered-text {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        </style>
    </head>
    <body style="background:#3cedd5">
        <div class="centered-text">
            <h1>Yes, it's my landing page</h1>
            <h2>Under construction, coming soon!!!</h2>
        </div>
    </body>
</html>

Die Ausgabe des obigen Code-Snippets lautet wie folgt:

Enter image description here

Quellcodegutschrift: Wie zentriere ich Text mit CSS vertikal? - Code Puran

12
Akshay Pethani

Sie können auch die folgenden Eigenschaften verwenden.

display: flex; 
align-content: center; 
justify-content : center;
12
satwik

Ein anderer Weg:

Setzen Sie nicht das height Attribut von div, sondern verwenden Sie stattdessen padding:, um den Effekt zu erzielen. Ähnlich wie bei der Zeilenhöhe funktioniert dies nur, wenn Sie eine Textzeile haben. Wenn Sie mehr Inhalt haben, wird der Text auf diese Weise zwar immer noch zentriert, das Div selbst wird jedoch etwas größer.

Also anstatt mit:

div {
  height: 120px;
  line-height: 120px;
}

Sie können sagen:

div {
   padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}

Dies setzt die oberen und unteren padding der div bis 60px und die linken und rechten padding auf Null, wodurch die div 120 Pixel (plus) werden Höhe Ihrer Schrift) hoch und platzieren Sie den Text vertikal zentriert im div.

12
Eseirt

Hier ist eine weitere Option mit Flexbox.

HTML

<div id="container">
  <div class="child">
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >
  </div>
</div>

CSS

  #container {
    display: flex;
  }

  .child {
    margin: auto;
  }

Ergebnis

Enter image description here

8
Long Tran

Ich bin nicht sicher, ob jemand den writing-mode Weg gegangen ist, aber ich denke, er löst das Problem sauber und hat breite Unterstützung :

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Dies funktioniert natürlich mit allen Dimensionen, die Sie benötigen (außer 100% des übergeordneten Elements). Wenn Sie die Grenzlinien auskommentieren, ist es hilfreich, sich vertraut zu machen.

JSFiddle Demo damit du fummelst.

Caniuse-Unterstützung : 85,22% + 6,26% = 91,48% (sogar Internet Explorer ist in!)

6
Carles Alcolea

Noch bessere Idee dafür. Das kannst du auch

body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
<div class="parent">
  <div class="centered">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>
5
Kumar

Für alle Ihre vertikalen Ausrichtungsbedürfnisse!

Deklarieren Sie dieses Mixin:

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Dann binde es in dein Element ein:

.element{
    @include vertical-align();
}
5
Gothburz

Der einfache und vielseitige Weg ist (as Michielvoo's table approach ):

[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

Die Verwendung dieses Attributs (oder einer äquivalenten Klasse) für ein übergeordnetes Tag funktioniert auch für viele untergeordnete Elemente, um Folgendes auszurichten:

<parent ctrv>  <ch1/>  <ch2/>   </parent>
4
bortunac

Probieren Sie die Eigenschaft transform aus:

 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 <div Id="box">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
4
sstauross

Für eine einzelne Textzeile (oder ein einzelnes Zeichen) können Sie diese Technik verwenden:

Es kann verwendet werden, wenn #box eine nicht feste, relative Höhe in% hat.

<div id="box"></div>

#box::before {
    display: block;
    content: "";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content: "TextContent";
}

Sehen Sie sich eine Live-Demo an bei JsBin (einfacher zu bearbeiten) oder JsFiddle (einfacher zu ändern, Höhe des Ergebnisrahmens).

Wenn Sie inneren Text in HTML und nicht in CSS platzieren möchten, müssen Sie den Textinhalt in ein zusätzliches Inline-Element einschließen und #box::after entsprechend bearbeiten. (Und natürlich sollte die Eigenschaft content: entfernt werden.)

Zum Beispiel <div id="box"><span>TextContent</span></div>. In diesem Fall sollte #box::after durch #box span ersetzt werden.

Für die Unterstützung von Internet Explorer 8 müssen Sie :: durch : ersetzen.

4
user

Mit dem folgenden Code wird das Div unabhängig von der Bildschirmgröße oder der Größe von div in die Mitte des Bildschirms verschoben:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Weitere Details zu flexhier .

3
Caner

Versuchen Sie den folgenden Code:

display: table-cell;
vertical-align: middle;
div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
<div>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
3
Rafiqul Islam

Ich möchte nur die Antwort von Michielvoo erweitern, um das Bedürfnis nach Linienhöhe und Atmung von Div-Höhe zu befreien. Es ist im Grunde nur eine vereinfachte Version wie folgt:

div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>All grown-ups were once children... but only few of them remember it</span>
</div>

<div>
  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>
</div>

HINWEIS: Auskommentierter Teil von css wird für fixed-height zum Einschließen von div benötigt.

3
mPrinC

Ich habe die vorherigen Antworten gesehen, und sie funktionieren nur für diese Bildschirmbreite (nicht ansprechbar). Für das responsive muss man flex verwenden.

Beispiel:

div{ display:flex; align-item:center;}
3

Eine sehr einfache und leistungsstarke Lösung, um das Zentrum vertikal auszurichten:

.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
<div class="outer-div">
  <span class="inner">No data available</span>
</div>
3
Manish Kumar

Sie können die Positionierungsmethode in CSS verwenden:

Überprüfen Sie das Ergebnis hier ....

HTML:

<div class="relativediv">
  <p>
    Make me vertical align as center
  </p>
</div>

CSS:

.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

Ich hoffe, Sie verwenden diese Methode auch.

2
Sivaprakash D

Ich brauchte eine Reihe anklickbarer Elefanten, vertikal zentriert, aber ohne einen Tisch zu benutzen, um etwas Internet Explorer 9 zu umgehen.

Ich fand schließlich das schönste CSS (für meine Bedürfnisse) und es ist großartig mit Firefox, Chrome und Internet Explorer 11. Leider lacht mich Internet Explorer 9 immer noch aus ...

div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
<div class="out" onclick="alert(1)">
  <div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>
  <div> <span>A lovely clickable option.</span> </div>
</div>

<div class="out" onclick="alert(2)">
  <div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>
  <div> <span>Something charming to click on.</span> </div>
</div>

Natürlich brauchen Sie die Ränder nicht, aber sie können Ihnen helfen, zu sehen, wie es funktioniert.

2
Dave

Stellen Sie es in button anstelle von div ein, wenn Sie sich nicht für den kleinen visuellen 3D-Effekt interessieren.

#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>
1
URL87

Absolutes Positionieren und Strecken

Wie bei der obigen Methode beginnt man damit, die Positionierung für die übergeordneten und untergeordneten Elemente als relativ bzw. absolut festzulegen. Von dort unterscheiden sich die Dinge.

Im folgenden Code habe ich diese Methode erneut verwendet, um das Kind sowohl horizontal als auch vertikal zu zentrieren. Sie können die Methode jedoch nur für die vertikale Zentrierung verwenden.

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Bei dieser Methode wird versucht, das untergeordnete Element auf alle vier Kanten auszudehnen, indem die Werte für den oberen, unteren, rechten und linken Rand auf 0 gesetzt werden. Da unser untergeordnetes Element kleiner als unsere übergeordneten Elemente ist, kann es nicht alle erreichen vier Kanten.

Wenn Sie auto auf allen vier Seiten als Rand festlegen, sind die gegenüberliegenden Ränder jedoch gleich und unser untergeordnetes Div wird in der Mitte des übergeordneten Div angezeigt.

Leider funktioniert das Obengenannte in Internet Explorer 7 und darunter nicht. Wie bei der vorherigen Methode kann der Inhalt in der untergeordneten div zu groß werden, sodass er ausgeblendet wird.

1
ArifMustafa

Das ist einfach und sehr kurz:

.block {
  display: table-row;
  vertical-align: middle;
}

.tile {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 100px;
}
<div class="body">
  <span class="tile">
    Hello middle world! :)
  </span>
</div>
<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1>Hello</h1>
    </div>
  </body>
</html>
0
Nikit Barochiya
.element{position: relative;top: 50%;transform: translateY(-50%);}

Fügen Sie diesen kleinen Code in die CSS-Eigenschaft Ihres Elements ein. Es ist großartig. Versuch es!

0
Rahul

Neuere Browser unterstützen jetzt die Funktion CSS calc. Wenn Sie auf diese Browser abzielen, möchten Sie möglicherweise Folgendes tun:

<div style="position: relative; width: 400px; height: 400px; background-color: red">
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>
</div>

Der Schlüssel ist die Verwendung von style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" innerhalb eines absoluten oder relativ positionierten übergeordneten Div.

0
bruceceng

Wenn Sie einen vertikal zentrierten Stil wünschen, können Sie display:table-cell und vertical-align:middle ausprobieren.

Beispiel:

#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
<div Id="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
0
Ayyappan K
.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform { 
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<h4>Using Height</h4>
<div class="box height">
  Lorem ipsum dolor sit
</div>

<hr />

<h4>Using Transform</h4>
<div class="box transform">
  <p>Lorem ipsum dolor sit</p>
</div>
0
antelove