Html 证明内容的问题：中心；在flexbox中 我想知道为什么当我给它正当的内容< /代码>时，视频和第二个容器不在页面的中间，正如你在第三和第四容器中看到的，盒子在中间对齐。

我尝试了一切，从边距到浮动到网格，但都不起作用。 再次为这个问题感到抱歉，但我是这个游戏的初学者

/*主体和根内容*/
身体{
保证金：0；
字体大小：0.813rem；
字体系列：“助手”，无衬线；
字体大小：400；
线高：1.5；
颜色：#212529；
文本对齐：左对齐；
背景色：白色；
}
img{
宽度：20%；
}
标题{
文本对齐：居中；
背景：rgb（255,123,0）；
颜色：白色；
填充：2米自动；
}
/*体根端*/
/*标题材料*/
.主货柜{
保证金：0自动；
最大宽度：900px；
宽度：100%；
}
.主容器柔性{
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.标志容器{
宽度：50%；
身高：50%；
右边距：8em；
自对准：居中；
}
#收割台img{
宽度：50%；
边缘顶部：0.75em；
页边距底部：0；
}
导航，
保险商实验室{
列表样式类型：无；
字体大小：0.75rem；
文本转换：大写；
填充：0；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.当前页面{
边框底部：1px纯黑；
}
a{
文字装饰：无；
颜色：白色；
字号：600；
}
a:悬停{
颜色：橙色；
边框底部：无；
}
@介质（最小宽度：675px）{
.主货柜{
保证金：0自动；
最大宽度：900px；
宽度：100%；
}
.主容器柔性{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
.标志容器{
宽度：15%；
身高：15%；
自对准：居中；
}
#收割台img{
宽度：100%；
边缘顶部：0.75em；
页边距底部：0；
垫底：0.4em；
}
导航，
保险商实验室{
列表样式类型：无；
字号：1rem；
文本转换：大写；
填充：0；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}
李{
颜色：白色；
左边距：2米；
自对准：居中；
}
.当前页面{
边框底部：1px纯白；
}
a{
文字装饰：无；
颜色：白色；
字号：650；
}
a:悬停{
颜色：橙色；
边框底部：无；
}
}
/*标题填充结束*/*主要填充*/
主要{
文本对齐：居中；
背景：白色；
填充：2米自动；
边缘顶端：2rem；
边缘底部：2rem；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.视频容器{
最大宽度：900px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
#录像带{
自对准：居中；
}
人力资源{
利润率：2.10%；
背景：rgb（255,123,0）；
}
.产品名称{
背景：rgb（255,123,0）；
颜色：白色；
最大宽度：900px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
边界半径：1米；
}
.h2产品名称{
边缘底部：1米；
}
.p-产品名称{
边际上限：0；
边缘底部：1米；
}
@介质（最大宽度：900px）{
.产品名称{
背景：rgb（255,123,0）；
颜色：白色；
最大宽度：900px；
左边距：2米；
右边距：2米；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
}
.产品{
边缘顶部：60像素；
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.装订图片{
宽度：20em；
左边距：2米；
右边距：2米；
}

联合装订公司。








我们的约束

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。硬树脂
这是一句令人厌恶的话，是一句话。


联合部队


联合部队


联合部队


联合部队



订阅我们的时事通讯

在CSS中，对于

主标识符，您有
弹性方向：列因此您需要
对齐项目：居中，而不是
证明内容：中心。另外，我喜欢Flexbox

align items
用于“十字轴”（如果您在列flex方向添加元素，十字轴是水平的，并且您希望您的内容水平居中；
justify contents
遵循方向轴，因此它将尝试垂直居中）

下面是有问题的更新代码块：

/* ... other styles were above ... */
main {
  text-align: center;
  background: white;
  padding: 2em auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* don't need this */
  align-items: center;
}
/* ... there's more stuff below ... */

您的伸缩方向是
列
——因此您需要使用
对齐项目：居中

justify content:center
使元素沿弹性流的方向居中<代码>对齐项目
在方向的横轴上对齐弹性子项（在本例中为列）

如果弹性方向是
行
-
对齐项目：居中
将垂直居中弹性子项，因为它是主弹性方向的横轴


/*主体和根内容*/
身体{
保证金：0；
字体大小：0.813rem；
字体系列：“助手”，无衬线；
字体大小：400；
线高：1.5；
有限公司
.video-container {
   //this width
   max-width: 900px;
   display: flex;
  flex-direction: column;
  justify-content: center;
}