html – 为什么我的d性项目不在中心？

概述我试图将一个红色框放在页面中间. 我已将flex容器设置为100％的高度,并且还将html,body设置为100％,并且它仍然不对齐center. 谁能帮助我理解为什么它不起作用？谢谢！ html, body { height: 100%;}.flex-container { display: flex; flex-flow: column; justify-content: 我试图将一个红色框放在页面中间.

我已将flex容器设置为100％的高度,并且还将HTML,body设置为100％,并且它仍然不对齐center.

谁能帮助我理解为什么它不起作用？谢谢！

HTML,body {  height: 100%;}.flex-container {  display: flex;  flex-flow: column;  justify-content: center;  height: 100%;}.Box {  flex: 0 0 100px;  background: red;  wIDth: 100px;}

<div class='flex-container'>    <div class='Box'></div></div>

解决方法 您可以使用justify-content来对齐主轴上的flex项.

您可以使用align-items来对齐横轴上的flex项.

由于您的Flex容器是flex-direction：column：

>主轴是垂直的,和
>横轴是水平的.

辩解内容：中心工作正常.

你只需要添加align-items：center.

HTML,body {  height: 100%;}.flex-container {  display: flex;  flex-flow: column;  justify-content: center;       /* centers flex items vertically,in this case */  align-items: center; /* NEW */ /* centers flex items horizontally,in this case */  height: 100%}.Box {  flex: 0 0 100px;  background: red;  wIDth: 100px;}

<div class='flex-container'>  <div class='Box'></div></div>

这是一个更详细的解释：

> In CSS Flexbox,why are there no “justify-items” and “justify-self” properties?

总结

以上是内存溢出为你收集整理的html – 为什么我的d性项目不在中心？全部内容，希望文章能够帮你解决html – 为什么我的d性项目不在中心？所遇到的程序开发问题。

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