blocks|key|2714415|text|它可以通过将每个flex项作为flex容器进行display，然后通过align-items属性垂直对齐内容来实现，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2714416|​|2714417|.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+*/
}|code-block|syntax|javascript|2714418|<div+class="flex-container">
++++<div+class="flex-item">
++++++I+want+to+be+vertically+centered!
++++++<s>But+I'm+not.</s>
++</div>
</div>|2714419|2714420|注意，如果省略了.flex-container的align-items:center;声明，也可以安全地从flex项中删除align-self:stretch;。|2714421|entityMap^0|F|4|N|7|Z|B|0|0|0|0|0|8|F|O|J|1P|J|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|S|$]]

<p>It can be achieved by <code>display</code>ing each flex item as a <code>flex</code> container and then aligning the contents vertically by <code>align-items</code> property, as follows:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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 */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-container"&gt;
    &lt;div class="flex-item"&gt;
      I want to be vertically centered!
      &lt;s&gt;But I'm not.&lt;/s&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>As a side-note, if you omit the <code>align-items:center;</code> declaration of the <code>.flex-container</code> you can safely remove <code>align-self:stretch;</code> from flex items as well.</p>


blocks|key|143319|text|我不确定我是否正确地解释了您的请求，但我认为您正在尝试使用"justify-content:stretch;“，而您应该使用flex-grow。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|143320|在我的示例中，我使用了flex+:1auto；它只是设置几个flex属性的简写。|143321|HTML：|143322|<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>|code-block|syntax|javascript|143323|CSS：|143324|*{
++++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%25;
++++display:flex;
++++justify-content:center;
}
.flex-center+{
++++align-items:+center;
}|143325|http://jsfiddle.net/p28tjskq/|offset|length|143326|Flex属性：|143327|https://developer.mozilla.org/en-US/docs/Web/CSS/flex|143328|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|0|0|0|T|0|0|0|0|1H|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@$Q|1B|R|1C|1|1D]]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1F|8|@]|9|@$Q|1G|R|1H|1|1I]]|A|$]]|$1|W|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|P]]|13|$5|Z|10|11|A|$12|V]]]]

<p>I'm not sure if I am interpreting your request correctly, but I think you are trying to use "justify-content:stretch;" when you should be using flex-grow.</p>

<p>Im my sample I used flex:1 auto; which is just shorthand to set a couple of flex properties.</p>

<p>HTML:</p>

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

<p>CSS:</p>

<pre><code>*{
    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;
}
</code></pre>

<p><a href="http://jsfiddle.net/p28tjskq/" rel="nofollow">http://jsfiddle.net/p28tjskq/</a></p>

<p>Flex property:<br/>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/flex</a></p>


<p>I'm trying to center the CONTENTS of a flexbox item while using <code>justify-content:stretch;</code> It appears that the old trick of using <code>display:table-cell;vertical-align:middle;</code> doesn't work in this situation. What does?</p>

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

&lt;div class="flex-container"&gt;
    &lt;div class="flex-item"&gt;I want to be vertically centered! But I'm not.&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>BEFORE YOU ANSWER:</strong> There seems to be a lot confusion about what I'm asking. I'm trying to center the <strong>CONTENTS</strong> of the flex-item. With <code>justify-content:stretch</code>, the height of the item will stretch to the full height of the container, but <strong>the contents</strong> of the item floats to the top (at least in Chrome).</p>

<p>"A picture is worth a thousand words." (A) is what I've already got. (B) is what I want.
<img src="https://i.stack.imgur.com/ZffJt.jpg" alt="enter image description here"></p>


How to vertically center the contents of a flexbox item

容器

在使用justify-content:stretch;时，我试图将flexbox项目的内容居中。在这种情况下，使用display:table-cell;vertical-align:middle;的老把戏似乎行不通。什么能做到？.flex-container {    display:flex;    align-it...

问如何将flexbox项的内容垂直居中
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将flexbox项的内容垂直居中EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将flexbox项的内容垂直居中
EN