Wie Center-Inhalt mit variabler Höhe innerhalb eines div vertikal zu?

Question

Was ist der beste Weg, um vertikal den Inhalt eines div zentriert, wenn die Höhe des Inhalts variabel ist. In meinem speziellen Fall ist die Höhe des Behälters div fixiert, aber es wäre schön, wenn es eine Lösung gab, die in Fällen, in denen der Behälter eine variable Höhe und hat funktionieren würde. Auch ich würde eine Lösung ohne Liebe oder nur sehr wenig Gebrauch von CSS-Hacks und / oder nicht-semantisches Markup.

Answer 1

Fügen Sie einfach

position: relative;
top: 50%;
transform: translateY(-50%);

an der inneren div.

Was sie tut, ist die innere divs oberen Rand auf die halbe Höhe des äußeren div (top: 50%;) und dann der inneren div bis um die Hälfte seiner Höhe (transform: translateY(-50%)) bewegt. Dies funktioniert mit position: absolute oder relative.

Beachten Sie, dass transform und translate haben Anbieter Präfixe, die nicht der Einfachheit halber enthalten.

Codepen: http://codepen.io/anon/pen/ZYprdb

Answer 2

Dies scheint die beste Lösung zu sein, die ich für dieses Problem gefunden haben, solange Ihr Browser unterstützt das ::before Pseudo-Element: CSS-Tricks:. Zentrieren im Unknown

Es erfordert keine zusätzliche Markup und scheint sehr gut zu funktionieren. Ich konnte nicht die display: table Methode verwenden, da table Elemente der max-height Eigenschaft nicht gehorchen.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Answer 3

Das ist etwas, was ich brauchte schon viele Male und eine konsistente Lösung noch zu tun, müssen Sie ein wenig nicht-semantisches Markup hinzufügen und einigen Browser spezifische Hacks. Wenn wir Browser-Unterstützung für CSS-3 erhalten werden Sie Ihre vertikale Zentrierung erhalten, ohne sündigen.

Zur besseren Erläuterung der Technik können Sie sich den Artikel I es von angepasst, aber es geht im Grunde ein zusätzliches Element hinzugefügt und verschiedene Stile in IE und Browsern Anwendung, die position:table\table-cell auf nicht-Tabellenelementen unterstützen.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

Es gibt viele Möglichkeiten (Hacks) um Stile in bestimmten Gruppen von Browsern gelten. Ich verwenden bedingte Kommentare, aber auf dem Artikel siehe oben verknüpfen zwei andere Techniken zu sehen.

Hinweis: Es gibt einfache Möglichkeiten, vertikale Zentrierung zu erhalten, wenn Sie einige Höhen im Voraus wissen, wenn Sie eine einzelne Textzeile zum Zentrum versuchen, oder in mehreren anderen Fällen. Wenn Sie weitere Informationen haben, dann werfen sie in, weil es eine Methode sein kann, die nicht Browser-Hacks erfordert oder nicht-semantisches Markup.

Update: Wir beginnen besser Browser-Unterstützung für CSS3 zu bekommen, sowohl flex-Box zu bringen und wandeln als alternative Methoden, um vertikale Zentrierung (unter anderen Effekten). Siehe diese andere Frage für weitere Informationen über moderne Methoden, aber hält, dass Browser-Unterstützung im Auge noch lückenhaft ist für CSS3.

Answer 4

das Kind Selektor, ich habe ein href genommen <= "https://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div / 13075912 # 13075912" > unglaubliche Antwort oberhalb des Fadi und es gekocht, nur eine CSS-Regel nach unten, die ich anwenden kann. Alles was ich jetzt tun müssen, ist die contentCentered Klassennamen Elemente hinzufügen, ich Zentrum wollen:

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

Verästelter CodePen: http://codepen.io/dougli/pen/Eeysg

Answer 5

Die beste Ergebnis für mich so weit:

div zentriert werden:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Answer 6

Sie können die Marge Auto verwenden. Mit Flex scheint die div vertikal zu zentrieren.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Answer 7

Das ist meine super Lösung für eine div mit einer dynamischen (prozentualen) Höhe.

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

Try this selbst.