html – 使用flexbox水平居中内容

概述我正在努力将我的容器中的一些内容水平居中： https://jsfiddle.net/y56t31q9/6/ .container { display: flex; flex-direction: column; width: 600px; background-color: blue; justify-content: center; /* Not centering c 我正在努力将我的容器中的一些内容水平居中：

https://jsfiddle.net/y56t31q9/6/

.container {  display: flex;  flex-direction: column;  wIDth: 600px;  background-color: blue;  justify-content: center;  /* Not centering content horizontally? */}.item {  max-wIDth: 500px;  height: 100px;  background-color: yellow;  border: 2px solID red;}

<div >  <div ></div>  <section ></section>  <section ></section>  <footer ></footer></div>

我本以为是合理的 – 内容会成功,但无济于事.

任何帮助将不胜感激
谢谢！

解决方法 属性justify-content：center沿着flex方向对齐flex项目 – 使用align-items：center-请参阅下面的演示：

.container {  display: flex;  flex-direction: column;  wIDth: 600px;  background-color: blue;  justify-content: center;  align-items:center;/*NEW*/}.item {  max-wIDth: 500px;  wIDth: 250px;/*NEW*/  height: 100px;  background-color: yellow;  border: 2px solID red;}

<div >  <div ></div>  <section ></section>  <section ></section>  <footer ></footer></div>

参见：Flexbox W3C spec

下面是当flex-direction为行时应用的图像：

一个.主轴对齐：对齐内容

湾十字轴对齐：对齐项目

当flex-direction是row时,主轴是水平的,但是当它是column时,它是相反的.

总结

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

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