So zentrieren Sie den Inhalt eines Flexbox-Elements vertikal

Question

Ich versuche, den Inhalt eines Flexbox-Elements zu zentrieren, während justify-content:stretch; verwendet wird Es scheint, dass der alte Trick der Verwendung von display:table-cell;vertical-align:middle; in dieser Situation nicht funktioniert. Was macht?

.flex-container { 
    display:flex; 
    align-items:center; 
    justify-content:stretch; 
} 
.flex-item { 
    align-self:stretch; 
} 

<div class="flex-container"> 
    <div class="flex-item">I want to be vertically centered! But I'm not.</div> 
</div> 

, bevor Sie antworten: Es scheint zu viel Verwirrung darüber, was ich verlange. Ich versuche, die INHALT des Flex-Item zu zentrieren. Mit justify-content:stretch wird die Höhe des Elements auf die volle Höhe des Containers gedehnt, aber der Inhalt des Elements schwebt nach oben (zumindest in Chrome).

"Ein Bild sagt mehr als tausend Worte." (A) ist, was ich schon habe. (B) ist was ich will.

Answer 1

Es kann durch jedes display ing flex Element als flex Behälter und dann Ausrichten der Inhalt vertikal durch align-items Eigenschaft erreicht werden, wie folgt:

.flex-container { 
 
    display:flex; 
 
    align-items:center; 
 
    height: 200px; /* for demo */ 
 
} 
 

 
.flex-item { 
 
    align-self:stretch; 
 
    display:flex; 
 
    align-items:center; 
 
    background-color: gold; /* for demo */ 
 
}

<div class="flex-container"> 
 
    <div class="flex-item"> 
 
     I want to be vertically centered! 
 
     <s>But I'm not.</s> 
 
    </div> 
 
</div>

Als Side- Hinweis, wenn Sie die align-items:center; Deklaration des .flex-container weglassen, können Sie auch align-self:stretch; von Flex-Elementen sicher entfernen.

Answer 2

Ich bin mir nicht sicher, ob ich Ihre Anfrage richtig interpretiere, aber ich denke, Sie versuchen, "justify-content: stretch;" wenn du flex-grow verwenden solltest.

In meiner Probe verwendete ich flex: 1 auto; Das ist nur Kurzform, um ein paar Flex-Eigenschaften zu setzen.

HTML:

<div class="flex-container"> 
    <div class="flex-item">I'm top dog! 
    </div> 
    <div class="flex-item flex-center"> 
     I want to be vertically centered! And I am! 
    </div> 
</div> 

CSS:

*{ 
    box-sizing:border-box; 
    padding:5px; 
} 
.flex-container { 
    border: 1px solid; 
    display:flex; 
    align-items:center; 
    height: 100px; 
} 
.flex-item { 
    flex: 1 auto; 
    border: 1px solid green; 
    height:100%; 
    display:flex; 
    justify-content:center; 
} 
.flex-center { 
    align-items: center; 
} 

http://jsfiddle.net/p28tjskq/

Flex Eigenschaft:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex