Html 校准不起作用

好的，所以我试图使一个div中的这4个div在屏幕上居中（水平和垂直），但是它们被粘在

的上边缘。他们的地位不会下降，他们一直处于领先地位

/*页脚*/
#页脚{
宽度：100%；
高度：400px；
背景色：红色；
不透明度：0.5；
文本对齐：居中；
字体大小：20px；
字母间距：35px；
空白：nowrap；
线高：12px；
溢出：隐藏；
}
.安排{
宽度：20%；
身高：80%；
边框：实心1px黑色；
显示：内联块；
垂直对齐：中间对齐；
背景色：白色；
}

---

我做了一些注释，向您展示了一种我认为您想要做的事情的方法

*{
框大小：边框框；/*百分比计算不包括边框宽度和填充，但边距仍然会影响它，请参见下面的计算*/
}
身体{
宽度：100vw；
}
#页脚{
宽度：100%；
高度：400px；
填充：40px 5px；/*我添加了这个顶部填充，是因为你希望孩子的身高是父母身高的80%。顶部40，底部40*/
背景色：红色；
不透明度：0.5；
文本对齐：居中；
线高：12px；
溢出：隐藏；
字体大小：0；/*消除内联块后的重影空格*/
}
.安排{
显示：内联块；
宽度：计算（25%-10px）；/*宽度%-裕度*/
高度：父级的100%；/*100%减去父级的填充*/
边距：0px 5px；/*间距，边距以宽度计算，5left+5right=10*/
字体大小：20px；/*重置字体大小*/
边框：实心1px黑色；
背景色：白色；
垂直对齐：顶部；
}

---

您可以试试这个。将此添加到您的代码中

display:flex;
justify-content:space-around;
align-items:center;

---

如果你想让你的盒子并排排列，就用中间的位置来改变空格。

垂直对齐：中间不适合你的箱子，用这三行css代替

。排列

position: relative;
top: 50%;
transform: translateY(-50%);

因此，您的最终css将是：

#footer {
  width: 100%;
  height: 400px;
  background-color: red;
  opacity: 0.5;
  text-align: center;
  font-size: 20px;
  letter-spacing: 35px;
  white-space: nowrap;
  line-height: 12px;
  overflow: hidden;
}
.arrange {
  width: 20%;
  height: 80%;
  border: solid 1px black;
  display: inline-block;
  position: relative;
  top: 50%;
  -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  -ms-transform: rotate(7deg); /* IE 9 */
  transform: translateY(-50%);
  background-color: white;
}

只需将“padding top”添加到#footer，就不再需要“vertical align”



#页脚{
填充顶部：90px；
宽度：100%；
高度：400px；
背景色：红色；
不透明度：0.5；
文本对齐：居中；
字体大小：20px；
字母间距：35px；
空白：nowrap；
线高：12px；
溢出：隐藏；
}
.安排{
宽度：20%；
身高：80%；
边框：实心1px黑色；
显示：内联块；
背景色：白色；
}
它的可能副本在某种程度上非常有效，只要它是空的，它就可以工作，一旦我在它里面添加了，它就会完全延迟，然后转向另一个方向。@高级玩家看起来像是在它上面添加了“垂直对齐：顶部”。“排列”会修复它。