ALIGN-CONTENT中心不工作，而是对齐中心工作
最近，我一直在了解有关Flexbox的更多信息，我只是偶然发现了一些意外的行为。
我有一个div，其中包含一个标头元素：
<div>
<h2> Hello </h2>
</div>
DIV
{
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
我正在尝试水平（在横轴中）将标头置为中心，而我的理解是Align-Content：Center会这样做。
但是，仅当我将Align-feelf应用于标题时，它才能有效。
知道什么可能导致这种行为？我以为flex项目上的Align-Content等同于每个孩子的Align-eff。为什么只有指定align-self才能工作？
Recently I've been learning more about flexbox, and I just stumbled across some unexpected behavior.
I have a div, with a header element inside of it:
<div>
<h2> Hello </h2>
</div>
The div has
{
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
I'm trying to center my header horizontally (in the cross-axis), and my understanding is that align-content: center would do that.
However, it only works if I apply align-self: center to the header.
Any idea what might be causing this behavior? I thought align-content on the flex item was equivalent to align-self on each of the children. Why is it only working if I specify align-self?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
无需将属性应用于标题，只需包括
Align-Items：Center;而不是Align-Content：中心对CSS，它将完美地工作。No need to apply the property to the header , Just include
align-items: center;instead ofalign-content:centerto the CSS and it will work perfectly.flex示例
官方文档
尝试
或
Flex examples
official documentation
Try
Or