html – 如何垂直居中的flexbox项目的内容

概述我正在使用justify-content：stretch来集中一个flexbox项目的CONTENTS;看来,使用display：table-cell; vertical-align：middle的旧技巧在这种情况下不行.什么是 .flex-container { display:flex; align-items:center; justify-content:stret 我正在使用justify-content：stretch来集中一个flexBox项目的CONTENTS;看来,使用display：table-cell; vertical-align：mIDdle的旧技巧在这种情况下不行.什么是

.flex-container {    display:flex;    align-items:center;    justify-content:stretch;}.flex-item {    align-self:stretch;}<div >    <div >I want to be vertically centered! But I'm not.</div></div>

在你解答之前：似乎对我正在问的问题有很多困惑.我正在设计中心flex项目的CONTENTS.使用合理内容：拉伸,项目的高度将伸展到容器的整个高度,但项目的内容浮动到顶部(至少在Chrome中).

“一张图片胜过千言万语.” (A)是我已经得到的(B)是我想要的

解决方法 可以通过将每个flex项目显示为flex容器,然后通过align-items属性垂直对齐内容来实现,如下所示：

.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 >    <div >      I want to be vertically centered!      <s>But I'm not.</s>  </div></div>

作为旁注,如果省略align-items：center;声明.flex-container可以安全地删除align-self：stretch;从flex项目以及.

总结

以上是内存溢出为你收集整理的html – 如何垂直居中的flexbox项目的内容全部内容，希望文章能够帮你解决html – 如何垂直居中的flexbox项目的内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。