Html 谁能告诉我怎么把这个红色的div居中吗？

有谁能告诉我们如何在灰色（父级）“包装”div中水平和垂直居中放置这个“红色”div（div=“Red”）？我希望红色div正好位于包装器div的中心（垂直和水平方向）。下面是代码：

正文{
身高：100%；
宽度：100%；
背景色：rgba（255,249,249,1）；
边际：0px；
左：0px；
顶部：0px；
右：0px；
底部：0px；
}
.包装纸{
背景色：rgba（204、204、204、1）；
高度：600px；
宽度：100%；
保证金：自动；
颜色：rgba（255，255，255，1）；
文本对齐：居中；
字体大小：粗体；
显示：块；
位置：相对位置；
顶部：0px；
底部：0px；
左：0px；
右：0px；
}
瑞德先生{
背景色：rgba（255,0,0,1）；
身高：50%；
宽度：600px；
位置：绝对位置；
字体大小：正常；
文本对齐：左对齐；
/*[禁用]行高：100px*/
显示：块；
垂直对齐：顶部；
/*[禁用]z索引：1*/
左：0%；
顶部：0px；
边际上限：0px；
右边距：自动；
页边距底部：自动；
左边距：自动；
右：0px；
底部：0px；
}
格林先生{
高度：200px；
宽度：200px；
位置：相对位置；
背景色：rgba（0,255,0,1）；
左：0px；
顶部：0px；
右：0px；
底部：0px；
显示：块；
/*[禁用]z索引：-1*/
边际：0px；
明确：无；
}
蓝先生{
高度：200px；
宽度：200px；
位置：绝对位置；
背景色：rgba（0,51,153,1）；
左：400px；
顶部：20px；
右：0px；
底部：100px；
显示：块；
z指数：1；
边际：0px；
浮动：左；
}

试验
红色
绿色
蓝色

您可以将其添加到css中的

.red

中：

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

以下是一个例子：

正文{
宽度：100%；
背景色：rgba（255,249,249,1）；
保证金：0；
左：0；
排名：0；
右：0；
底部：0；
}
.包装纸{
背景色：rgba（204、204、204、1）；
高度：600px；
宽度：100%；
颜色：rgba（255，255，255，1）；
文本对齐：居中；
字体大小：粗体；
位置：相对位置；
}
瑞德先生{
背景色：rgba（255,0,0,1）；
身高：50%；
宽度：600px；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
字体大小：正常；
文本对齐：左对齐；
保证金：0自动；
左：0；
右：0；
}
格林先生{
高度：200px；
宽度：200px；
背景色：rgba（0,255,0,1）；
}
蓝先生{
高度：200px；
宽度：200px；
位置：绝对位置；
背景色：rgba（0,51,153,1）；
顶部：20px；
右：0；
}

试验
红色
绿色
蓝色

您可以将其添加到css中的

.red

中：

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

以下是一个例子：

正文{
宽度：100%；
背景色：rgba（255,249,249,1）；
保证金：0；
左：0；
排名：0；
右：0；
底部：0；
}
.包装纸{
背景色：rgba（204、204、204、1）；
高度：600px；
宽度：100%；
颜色：rgba（255，255，255，1）；
文本对齐：居中；
字体大小：粗体；
位置：相对位置；
}
瑞德先生{
背景色：rgba（255,0,0,1）；
身高：50%；
宽度：600px；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
字体大小：正常；
文本对齐：左对齐；
保证金：0自动；
左：0；
右：0；
}
格林先生{
高度：200px；
宽度：200px；
背景色：rgba（0,255,0,1）；
}
蓝先生{
高度：200px；
宽度：200px；
位置：绝对位置；
背景色：rgba（0,51,153,1）；
顶部：20px；
右：0；
}

试验
红色
绿色
蓝色

为了垂直/水平居中，我建议使用flex

您的灰色容器只需要这些属性，而红色容器不再需要诸如

top:50%

、

bottom:0

等边距/位置属性：

display: flex;
align-items: center; // Vertically center content
justify-content: center; // Horizontally center content

---

这里a

为了垂直/水平居中，我建议使用flex

您的灰色容器只需要这些属性，而红色容器不再需要诸如

top:50%

、

bottom:0

等边距/位置属性：

display: flex;
align-items: center; // Vertically center content
justify-content: center; // Horizontally center content

---

这里a

你需要知道的关于定心的一切都可以在顶部找到：50%；转化：translateY（-50%）；看起来效果很好。你能解释一下它到底是做什么的吗？是的，我能<代码>顶部：50% 将把<>代码>的顶部放在父div（<代码>包装器< /代码>）的中间。

transform:translateY（-50%）

将

.red

div按其自身高度的50%拉到顶部。但当我们调整/重新缩放浏览器窗口时，此操作失败。所有的部门都没有相应的规模。那有什么解决办法？我胡乱解释了一下。前三秒钟，您看到顶部的

从
0
变为
50%
，然后您看到转换：translateY从
0
变为
-50%
。将鼠标悬停在灰色区域上。为了清晰起见，我添加了一个div，以便您可以看到包装的中间部分。缩放的解决方案可能是使用
宽度的百分比
，并使用
最小宽度
等属性设置最小值。顶部：50%；转化：translateY（-50%）；看起来效果很好。你能解释一下它到底是做什么的吗？是的，我能<代码>顶部：50% 将把<>代码>的顶部放在父div（<代码>包装器< /代码>）的中间。
transform:translateY（-50%）
将
.red
div按其自身高度的50%拉到顶部。但当我们调整/重新缩放浏览器窗口时，此操作失败。所有的部门都没有相应的规模。那有什么解决办法？我胡乱解释了一下。前三秒钟，您看到顶部的
从
0
变为
50%
，然后您看到转换：translateY从
0
变为
-50%
。将鼠标悬停在灰色区域上。为了清晰起见，我加了一个div，这样你就可以看到