Wie kann ich Elemente in einem Div vertikal ausrichten?

792

Ich habe eine Div mit zwei Bildern und einer h1. Alle von ihnen müssen vertikal innerhalb des Div nebeneinander ausgerichtet sein.

Eines der Bilder muss absoluteinnerhalb des Div positioniert werden.

Was ist das CSS, das benötigt wird, damit es in allen gängigen Browsern funktioniert?

<div id="header">
    <img src=".." ></img>
    <h1>testing...</h1>
    <img src="..."></img>
</div>
Abdu
quelle
14
Ich habe eine Liste aller Möglichkeiten zur vertikalen Ausrichtung erstellt. Ich werde sie hier belassen
Muhammad Umer
2
Hier sind zwei einfache Methoden, um ein Element innerhalb eines Divs vertikal, horizontal oder beides zu zentrieren
Michael Benjamin
1
Rand oben: Auto und Rand unten: Auto (Funktioniert für viele Fälle).
CrippledTable

Antworten:

932

Wow, dieses Problem ist beliebt. Es basiert auf einem Missverständnis in der vertical-alignImmobilie. Dieser ausgezeichnete Artikel erklärt es:

Verständnis vertical-alignoder "Wie (nicht) Inhalte vertikal zentriert werden" von Gavin Kistner.

"Wie zentriere ich mich in CSS?" zentrieren Sie ist ein großartiges Web-Tool, mit dem Sie die erforderlichen CSS-Zentrierungsattribute für verschiedene Situationen finden können.


Kurz gesagt (und um Fäulnis zu verhindern) :

  • Inline-Elemente (und nur Inline-Elemente) können in ihrem Kontext über vertikal ausgerichtet werden vertical-align: middle. Der „Kontext“ ist jedoch nicht die gesamte Höhe des übergeordneten Containers, sondern die Höhe der Textzeile, in der sie sich befinden. Jsfiddle-Beispiel
  • Bei Blockelementen ist die vertikale Ausrichtung schwieriger und hängt stark von der jeweiligen Situation ab:
    • Wenn das innere Element eine haben feste Höhe , können Sie seine Position machen absoluteund geben ihre height, margin-topund topPosition.jsfiddle Beispiel
    • Wenn das zentrierte Element aus einer einzelnen Linie besteht und die übergeordnete Höhe festgelegt ist , können Sie einfach festlegen, dass die Container line-heightihre Höhe ausfüllen. Diese Methode ist meiner Erfahrung nach sehr vielseitig. jsfiddle Beispiel
    • … Gibt es noch mehr solche Sonderfälle.
Konrad Rudolph
quelle
142
Das Problem mit den "gültigen" Lösungen (also nicht den vertical-align: middle) ist, dass Sie eine feste Höhe angeben müssen. Für Responsive Web Design nicht sehr gut möglich .
Emilie
1
Ich hatte diese Struktur: <div height = "## px"> Mein Text </ div> Für mich hat die Eigenschaft lineHeight mit demselben Wert festgelegt, der in der Eigenschaft div height verwendet wurde: '## px' (## weil dieser Wert ist in meinem Fall dynamisch) danke
patricK
8
Dies funktioniert auch mit inline-blockund table-cellElementen. Wenn Sie Probleme damit haben, versuchen Sie, line-heightdas Containerelement (dh den Kontext) anzupassen, da es in den vertical-alignZeilenfeldberechnungen verwendet wird.
Alex W
1
css-tricks.com/centering-css-complete-guide <- einige gute Optionen, die hier vorgestellt wurden, haben mich jedoch die meiste Zeit auf die Tabellen- / Tabellenzellenlösung
gestützt
1
Dieses Tool (howtocenterincsss.com) ist ziemlich beeindruckend, da es in meinem vorhandenen CSS sofort funktioniert hat ! Das ist super selten. Erinnern Sie sich an die alten Zeiten, in denen Sie ganze Stylesheets aus einem Beispiel kopieren mussten, manchmal sogar das Beispiel-HTML, und dann Elemente nacheinander entfernen und umbenennen, bis es das ist, was ich brauchte. Nicht der Fall für diese Seite!
konstantin
190

Jetzt, da die Flexbox-Unterstützung zunimmt, würde dieses auf das enthaltende Element angewendete CSS das enthaltene Element vertikal zentrieren:

.container {        
    display: flex;
    align-items: center;
}

Verwenden Sie die vorangestellte Version, wenn Sie auch auf Explorer 10 und alte (<4.4) Android-Browser abzielen müssen:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}
E. Serrano
quelle
Eine schöne Lösung, danke. Können Sie vorschlagen, wie Flexbox eine horizontale Bildlaufleiste anzeigt, falls das innere Element größer als der Container ist? (Ich versuche, das innere Element innerhalb des Containers zoombar / scrollbar zu machen, wie die Leinwand in Powerpoint)? Ist das überhaupt möglich?
Boris Burkov
1
@YazidErman Diese Lösung hängt von der Flexbox ab, also nein, nur IE 10 und höher oder ein anderer moderner Browser caniuse.com/#search=flexbox Flexbox ist großartig, wenn es unterstützt wird, aber das ist nicht überall. Die Anzeigetabelle und die Tabellenzelle sind wahrscheinlich die beste Lösung. Der Container muss nur eine Tabelle sein. Das zentrierte Element wird in ein Element mit einer Anzeigetabellenzelle eingeschlossen und kann dann einfach zentriert werden, wie einige andere Antworten hier zeigen.
Shaunhusain
1
Warum war das für mich so schwer zu finden? Danke für die Antwort! Kann bestätigen, dass dies für mich in einem Szenario funktioniert, in dem eine andere Antwort nicht funktioniert hat.
Michael McKenna
1
Nützliche CSS Tricks Anleitung auf Flexbox dann schauen Sie sich den align-itemsAbschnitt
icc97
1
Im Jahr 2020 können wir flexbox caniuse.com/#feat=flexbox
tonygatta
116

Ich habe diesen sehr einfachen Code verwendet:

HTML:

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS:

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

Unabhängig davon, ob Sie a .classoder an verwenden #id, ändert sich das Ergebnis natürlich nicht.

user2346571
quelle
3
Hier ist ein vollständiges Beispiel für alle neun Ausrichtungsmöglichkeiten (oben-Mitte-unten und links-Mitte-rechts): jsfiddle.net/webMac/0swk9hk5
webMac
Im Jahr 2020 können wir flexbox caniuse.com/#feat=flexbox
tonygatta verwenden.
funktioniert perfekt für mich
huynq0911
49

Es hat bei mir funktioniert:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}
Romain
quelle
9
Es ist also kein "Block" -Element mehr?
Pacerier
7
Wenn Sie dann horizontal ausrichten möchten, margin : 0 autofunktioniert dies aufgrund derdisplay: table-cell
Ortomala Lokni
48
 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }
Sameera Prasad Jayasinghe
quelle
7
Ich denke, diese Lösung ist am schnellsten und am einfachsten zu verstehen. Vielleicht liegt es daran, dass ich nicht geduldig genug war, um die ausgewählte Antwort zu beantworten. Flexbox all die Dinge!
Modulitos
1
Das Hinzufügen von justify-content: centerbehoben meinen Mangel an horizontaler Zentrierung
Samuel Slade
22

Eine Technik von einem Freund von mir:

HTML:

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS:

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

DEMO hier

abernier
quelle
1
Diese Technik wird hier ausführlicher beschrieben: css-tricks.com/centering-in-the-unknown
Nerdess
18

Zum Blockieren von Blockelementen in der Mitte (funktioniert in IE9 und höher) ist ein Wrapper erforderlich div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
Blacksonic
quelle
2
Diese Methode kann dazu führen, dass Elemente unscharf werden, da das Element auf einem „halben Pixel“ platziert wird. Eine Lösung hierfür besteht darin, die Perspektive des Elements festzulegen. transformieren: Perspektive (1px) translateY (-50%);
Simon
16

Alle von ihnen müssen vertikal innerhalb des div ausgerichtet sein

Ausgerichtet wie ? Spitzen der Bilder am oberen Rand des Textes ausgerichtet?

Eines der Bilder muss absolut innerhalb des Div positioniert sein.

Absolut relativ zum DIV positioniert? Vielleicht könnten Sie skizzieren, wonach Sie suchen ...?

fd hat die Schritte zur absoluten Positionierung beschrieben und die Anzeige des H1Elements so angepasst, dass Bilder inline dazu angezeigt werden. Dazu füge ich hinzu, dass Sie die Bilder mithilfe des vertical-alignStils ausrichten können :

#header h1 { display: inline; }
#header img { vertical-align: middle; }

... dies würde den Header und die Bilder zusammenfügen, wobei die oberen Kanten ausgerichtet sind. Es gibt andere Ausrichtungsoptionen. siehe die Dokumentation . Möglicherweise ist es auch vorteilhaft, den DIV fallen zu lassen und die Bilder innerhalb des H1Elements zu verschieben. Dadurch erhält der Container einen semantischen Wert, und die Anzeige der folgenden Elemente muss nicht mehr angepasst werden H1:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>
Shog9
quelle
15

Verwenden Sie diese Formel und es funktioniert immer ohne Risse:

#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* For explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* For explorer only */
/* Optional: #inner[id] {position: static;} */
<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Anita Mandal
quelle
2
Ich habe noch nie in CSS diese Art von Selektor "#outer [id]" gesehen. Was soll das machen? Was ist, wenn ich Klasse statt ID habe?
Alexa Adrian
12

Fast alle Methoden müssen die Höhe angeben, aber oft haben wir keine Höhen.
Hier ist also ein CSS3 3-Zeilen-Trick, bei dem die Höhe nicht bekannt sein muss.

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

Es wird sogar in IE9 unterstützt.

mit seinen Herstellerpräfixen:

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

Quelle: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Shadoweb
quelle
Dies scheint jedoch nur dann zu funktionieren, wenn die Höhe des übergeordneten Elements des Elements festgelegt ist. Die Eigenschaft 'top' mit Prozentwert funktioniert nur in dem Container mit fester Höhe, richtig?
ucdream
Ja, es funktioniert nur in einigen Fällen, ich hatte später Probleme mit diesen Methoden ... Die Sache ist, die größtmöglichen Möglichkeiten zu haben und sobald Sie eine brauchen, testen Sie alle, bis Sie die gute bekommen, weil alle Methoden habe Dinge, die in einem bestimmten Fall nicht funktionieren ...
Shadoweb
12

Auf zwei Arten können Sie Elemente vertikal und horizontal ausrichten

  1. Bootstrap 4
  2. CSS3

Geben Sie hier die Bildbeschreibung ein

1. Bootstrap 4.3.X.

zur vertikalen Ausrichtung: d-flex align-items-center

zur horizontalen Ausrichtung: d-flex justify-content-center

.container {
    height: 180px;
    width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex align-items-center justify-content-center bg-info container">
  <div class="bg-light p-2">I am in Center</div>
</div>

2. CSS3

.container {
    display: flex;
    align-items: center;  // verticall center
    justify-content: center; // horizontally center

    background-color: #17a2b8;
    height: 180px;
    width:100%;
}

.child {
  background-color: #f8f9fa;
  padding: 0.5rem;
}
<div class="container">
  <div class="child">I am in Center</div>
</div>

WasiF
quelle
1
Beide Möglichkeiten sind grundsätzlich gleich, da Bootstrap in seinen Klassen dieselben Flex-Attribute verwendet.
Mx.
Bootstrap ist keine Magie. Es unterliegt denselben CSS-Einschränkungen, die alle betreffen. Es versteckt nur, was es vor dem Durchschnitt tut. Benutzer.
JasonGenX
10

Mein Trick besteht darin, eine Tabelle mit 1 Zeile und 1 Spalte in das div einzufügen, 100% der Breite und Höhe festzulegen und die Eigenschaft vertikal auszurichten: Mitte.

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

Geige: http://jsfiddle.net/joan16v/sbqjnn9q/

joan16v
quelle
7
Dies scheint der beste Weg zu sein, um viel Kopfkratzen zu vermeiden. Ich bin immer noch verwirrt darüber, warum CSS keinen vertikalen Ausrichtungsstandard hat.
Kokodoko
5

# 3 Möglichkeiten, um zentrales untergeordnetes Div in einem übergeordneten Div zu machen

  • Absolute Positionierungsmethode
  • Flexbox-Methode
  • Transform / Translate-Methode

    Geben Sie hier die Bildbeschreibung ein

    Demo

/* 1st way */
.parent1 {
  background: darkcyan;
   width: 200px;
   height: 200px;
   position: relative;
}
.child1 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -15px;
}

/* 2nd way */
.parent2 {
  display: flex;
  justify-content: center;
  align-items: center;
  background: darkcyan;
  height: 200px;
  width: 200px;
}
.child2 {
  background: white;
  height: 30px;
  width: 30px;
}

/* 3rd way */
.parent3 {
  position: relative;
  height: 200px;
  width: 200px;
  background: darkcyan;
}
.child3 {
  background: white;
  height: 30px;
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent1">
  <div class="child1"></div>
</div>
<hr />

<div class="parent2">
  <div class="child2"></div>
</div>
<hr />

<div class="parent3">
  <div class="child3"></div>
</div>

Vahid Akhtar
quelle
4

Wenn Sie CSS zur vertikalen Mitte verwenden, können Sie die äußeren Container wie eine Tabelle und den Inhalt wie eine Tabellenzelle wirken lassen. In diesem Format bleiben Ihre Objekte zentriert. :) :)

Ich habe zum Beispiel mehrere Objekte in JSFiddle verschachtelt, aber die Kernidee lautet wie folgt:

HTML

<div class="circle">
  <div class="content">
    Some text
  </div>
</div>

CSS

 .circle {
   /* act as a table so we can center vertically its child */
   display: table;
   /* set dimensions */
   height: 200px;
   width: 200px;
   /* horizontal center text */
   text-align: center;
   /* create a red circle */
   border-radius: 100%;
   background: red;
 }

 .content {
   /* act as a table cell */
   display: table-cell;
   /* and now we can vertically center! */
   vertical-align: middle;
   /* some basic markup */
   font-size: 30px;
   font-weight: bold;
   color: white;
 }

Beispiel für mehrere Objekte:

HTML

<div class="container">
  <div class="content">

    <div class="centerhoriz">

      <div class="circle">
        <div class="content">
          Some text
        </div><!-- content -->
      </div><!-- circle -->

      <div class="square">
        <div class="content">
          <div id="smallcircle"></div>
        </div><!-- content -->
      </div><!-- square -->

    </div><!-- center-horiz -->

  </div><!-- content -->
</div><!-- container -->

CSS

.container {
  display: table;
  height: 500px;
  width: 300px;
  text-align: center;
  background: lightblue;
}

.centerhoriz {
  display: inline-block;
}

.circle {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: red;
  border-radius: 100%;
  margin: 10px;
}

.square {
  display: table;
  height: 200px;
  width: 200px;
  text-align: center;
  background: blue;
  margin: 10px;
}

.content {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  color: white;
}

#smallcircle {
  display: inline-block;
  height: 50px;
  width: 50px;
  background: green;
  border-radius: 100%;
}

Ergebnis

Ergebnis

https://jsfiddle.net/martjemeyer/ybs032uc/1/

Henk-Martijn
quelle
3

Standardmäßig ist h1 ein Blockelement und wird in der Zeile nach dem ersten Bild gerendert. Das zweite Bild wird in der Zeile nach dem Block angezeigt.

Um dies zu verhindern, können Sie das h1 so einstellen, dass es ein Inline-Flussverhalten aufweist:

#header > h1 { display: inline; }

Um das Bild absolut innerhalb des Div zu positionieren , müssen Sie das enthaltende Div auf eine "bekannte Größe" einstellen, bevor dies ordnungsgemäß funktioniert. Nach meiner Erfahrung müssen Sie auch das Positionsattribut von der Standardeinstellung ändern - position: relative funktioniert für mich:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

Wenn dies funktioniert, sollten Sie versuchen, die Attribute für Höhe, Breite und Position schrittweise aus div.header zu entfernen, um die minimal erforderlichen Attribute zu erhalten, um den gewünschten Effekt zu erzielen.

AKTUALISIEREN:

Hier ist ein vollständiges Beispiel, das unter Firefox 3 funktioniert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Example of vertical positioning inside a div</title>
        <style type="text/css">
            #header > h1 { display: inline; }
            #header { border: solid 1px red; 
                      position: relative; }
            #img-for-abs-positioning { position: absolute;
                                       bottom: -1em; right: 2em; }
        </style>
    </head>

    <body>
        <div id="header">
            <img src="#" alt="Image 1" width="40" height="40" />
            <h1>Header</h1>
            <img src="#" alt="Image 2" width="40" height="40" 
                 id="img-for-abs-positioning" />
        </div>
    </body>
</html>
Mike Tunnicliffe
quelle
4
Ich sollte beachten, dass das richtige DOCTYPE manchmal große Unterschiede in der Darstellung von CSS bewirken kann, insbesondere im Internet Explorer. Ich würde empfehlen, dass Sie einen DOCTYPE wählen, der bekanntermaßen einem strengen Standardmodus entspricht, damit Sie ein konsistenteres Verhalten zwischen den Browsern erwarten können.
Mike Tunnicliffe
2
Ich würde keine Konsistenz zwischen Browsern 'erwarten'. Der einzige Weg, um sicher zu sein, ist zu testen: /
Cocowalla
3

Wir können eine CSS-Funktionsberechnung verwenden, um die Größe des Elements zu berechnen und dann das untergeordnete Element entsprechend zu positionieren.

Beispiel HTML:

<div class="box">
    <span><a href="#">Some Text</a></span>
</div>

Und CSS:

.box {
    display: block;
    background: #60D3E8;
    position: relative;
    width: 300px;
    height: 200px;
    text-align: center;

}
.box span {
    font: bold 20px/20px 'source code pro', sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 10px);
}
a {
    color: white;
    text-decoration: none;
}

Hier erstellte Demo: https://jsfiddle.net/xnjq1t22/

Diese Lösung funktioniert gut mit reaktionsschnellen div heightundwidth auch.

Hinweis: Die Calc-Funktion wurde nicht auf Kompatibilität mit alten Browsern getestet.

Dashrath
quelle
3

Bis heute habe ich eine neue Problemumgehung gefunden, um mehrere Textzeilen in einem Div mithilfe von CSS3 vertikal auszurichten (und ich verwende auch das Bootstrap v3-Rastersystem, um die Benutzeroberfläche zu verschönern).

.immediate-parent-of-text-containing-div{
    height: 50px;         /* or any fixed height that suits you.*/
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

Nach meinem Verständnis muss das unmittelbare übergeordnete Element eines Textes, der ein Element enthält, eine gewisse Höhe haben. Ich hoffe es wird dir auch helfen. Vielen Dank!

Shivam
quelle
Sehr saubere Lösung. Dieser hat gut für mich funktioniert.
Akalonda
2

Meine neue Lieblingsmethode ist ein CSS-Raster:

/* technique */

.wrapper {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}

/* visual emphasis */

.wrapper {
  border: 1px solid red;
  height: 180px;
  width: 400px;
}

img {
  width: 100px;
  height: 80px;
  background: #fafafa;
}

img:nth-child(2) {
  height: 120px;
}
<div class="wrapper">
  <img src="https://source.unsplash.com/random/100x80/?bear">
  <img src="https://source.unsplash.com/random/100x120/?lion">
  <img src="https://source.unsplash.com/random/100x80/?tiger">
</div>

Stephen
quelle
1

Verwenden Sie einfach einen einzelligen Tisch im div! Stellen Sie einfach die Zellen- und Tabellenhöhe auf 100% ein und Sie können die vertikale Ausrichtung verwenden.

Ein einzelliger Tisch im Div übernimmt die vertikale Ausrichtung und ist abwärtskompatibel zur Steinzeit!

Joel Moses
quelle
0

Ich verwende die folgende Lösung (ohne Positionierung und ohne Linienhöhe) seit über einem Jahr. Sie funktioniert auch mit IE 7 und 8.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
Arsh
quelle
0

Dies ist meine persönliche Lösung für ein i-Element in einem div

JSFiddle-Beispiel

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}
danigonlinea
quelle
0

Bei mir hat es so funktioniert:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

Das "a" -Element wurde mithilfe von Bootstrap-Klassen in eine Schaltfläche konvertiert und ist jetzt vertikal in einem äußeren "div" zentriert.

BernieSF
quelle
0

Mit Display Flex müssen Sie zuerst den Container des Elements umwickeln, das Sie ausrichten möchten.

<div class="outdiv">
      <div class="indiv">
         <span>test1</span>
         <span>test2</span>
      </div>
    </div>

Wenden Sie dann das folgende CSS auf Wrapper Div oder Outdiv in meinem Beispiel an

.outdiv {
    display: flex;
    justify-content:center;
    align-items:center;
}
Dennis Don
quelle
Nur-Code-Antworten werden nicht empfohlen. Bitte fügen Sie eine Erklärung hinzu, wie dies das Problem löst oder wie sich dies von den vorhandenen Antworten unterscheidet. Aus dem Rückblick
Nick
-3

Nur das:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

Ein einzelliger Tisch im Div übernimmt die vertikale Ausrichtung und ist abwärtskompatibel zur Steinzeit!

Joel Moses
quelle
-3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <style type="text/css">
            #style_center { position:relative; top:50%; left:50%; }
            #style_center_absolute { position:absolute; top:50px; left:50px; }
            <!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }-->
        </style>
    </head>

    <body>
        <div style="height:200px; width:200px; background:#00FF00">
            <div id="style_center">+</div>
        </div>
    </body>
</html>
pr0gg3r
quelle
-4

Hier ist nur ein weiterer (reaktionsfähiger) Ansatz:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

Peter Mortensen
quelle
-4

Ich bin ein .NET-Typ, der gerade mit Webprogrammierung angefangen hat. Ich habe kein CSS verwendet (na ja, ein bisschen). Ich habe ein wenig JavaScript verwendet, um die vertikale Zentrierung zusammen mit der .css-Funktion von jQuery durchzuführen.

Ich poste nur alles von meinem Test. Es ist wahrscheinlich nicht übermäßig elegant, aber es funktioniert soweit.

script.

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

        <script type="application/javascript">
            function centerElementVertically(id) {
                var btnDivHeight = $(id).outerHeight();
                var prnt = $(id).parent();
                var parentHeight = prnt.outerHeight();

                var newTop = ((parentHeight - btnDivHeight) / 2) + 'px';
                var newPct = newTop / parentHeight+'%;';

                $(id).css({top: newTop});
            }

            function showAlert(){
                alert("alert");
            }

            $(window).load(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            });

            $(window).resize(()=>{
                centerElementVertically('#buttonRight');
                centerElementVertically('#buttonLeft');
                centerElementVertically('#testerbtn')
            })
        </script>

        <style>
            #div1 {
                position:relative;
                height: 33%;
                background-color: red;
                overflow: hidden;
            }
            #buttonLeft {
                position: relative;
                float:left;
                width:50%;
                height:20%;
                background-color: cornsilk;
            }
            #buttonRight {
                position: relative;
                float:right;
                width:50%;
                height:50%;
                background-color: darkorchid;
            }
            #testerbtn {
                position: absolute;
            }
            body {
                background-color: aqua;
            }
        </style>

        <body>
            <div id="div1">
                <div id="buttonLeft">
                    <button id="testerbtn">tester</button>
                </div>
                <div id="buttonRight"></div>
            </div>
        </body>
    </head>
</html>
tronious
quelle
7
Sie bringen neuen Webentwicklern bei, wie man etwas falsch macht, HTML dient zum Definieren von Inhalten, CSS zum Stylen von HTML und JavaScript zum Bearbeiten beider zur Laufzeit abhängig von den Bedingungen. Das Verwechseln dieser kann schnell zu Spaghetti und leistungsintensivem Code führen
OverCoder
-8
<div id="header" style="display: table-cell; vertical-align:middle;">

...

oder CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Browser-Abdeckung

Dimarzionist
quelle
1
Die Eigenschaft "Vertikal ausrichten" gilt nicht, da "div" angezeigt wird: standardmäßig blockieren und anscheinend nichts unternommen wurde, um sie zu ändern.
Quentin
3
Anscheinend wurde das Display auf aktualisiert table-cell, was vertical-align: middle;funktioniert. Noch besser ist, dass es ohne verschachtelten Wrapper / Buffer Div funktioniert. Es funktioniert sowohl für Text als auch für Bilder (oder für beide), und Sie müssen die Positionseigenschaften nicht ändern.
MSpreij
3
Dieser funktioniert. Es ändert die Anzeige in eine Tabellenzelle, die die Eigenschaft "Vertikal ausrichten" übernimmt. Keine Ahnung, warum die Leute das ablehnen.
Texasbruce
1
Ja, soweit ich weiß, ist dies der am wenigsten aufdringliche Weg, etwas Vertikales in einem Div zu zentrieren. +1
Pma
Ok, vielleicht war ich mit meinen Schlussfolgerungen zu schnell ... Anzeige hinzufügen: Tabellenzelle bricht den Div-Rand und zusätzlich wird der Rand außerhalb von div angezeigt, der Rand kombiniert mit Randradius zeigt abgerundete Ecken innerhalb des Bereichs von außen an
Pma