Html 使水平和垂直居中

我有一个div，在这个div里面，我有文本和一张卡片，我必须使它们垂直和水平居中，类似于下图。提前谢谢

---

。百分位卡{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：30%；
身高：30%；
浮动：左；
}
.百分位卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}

我的总体立场是什么？
你做得比我好
60%
<代码> > p>为了在页面中间居中，可以从<代码>百分位卡< /代码>中删除<代码>浮动>代码>属性，并以中心余量替换它。

对于垂直对齐，可以使用“视图高度”

这可能有助于突出显示边距。还有演示

关于视图高度，如果不希望基于前面元素的约束设置，您可能需要考虑./P>
片段：



.百分位卡{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：800px；
身高：30%；
保证金：0自动；
填充：10px；
}
.百分位卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.边界{
边际上限：40vh；
文本对齐：居中；
}
我的总体立场是什么？
你做得比我好
60%
<代码> > p>为了在页面中间居中，可以从<代码>百分位卡< /代码>中删除<代码>浮动>代码>属性，并以中心余量替换它。

对于垂直对齐，可以使用“视图高度”

这可能有助于突出显示边距。还有演示

关于视图高度，如果不希望基于前面元素的约束设置，您可能需要考虑./P>
片段：



.百分位卡{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：800px；
身高：30%；
保证金：0自动；
填充：10px；
}
.百分位卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.边界{
边际上限：40vh；
文本对齐：居中；
}
我的总体立场是什么？
你做得比我好
60%
我修复了它


。百分位卡{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：30%；
身高：30%；
浮动：左；
}
.百分位卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.中心{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

我的总体立场是什么？
你做得比我好
60%
我修复了它


。百分位卡{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
宽度：30%；
身高：30%；
浮动：左；
}
.百分位卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}
.中心{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

我的总体立场是什么？
你做得比我好
60%
我观察所有答案，我认为这些答案都是无效的。所以，我发布了一个答案


.root\u类{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：适合的内容；
保证金：0自动；
}
@介质（最大宽度：576px）{
.root_类{
弯曲方向：立柱；
}
}
.文本{
字号：2rem；
颜色：#bbb；
保证金：0；
右边距：1rem；
文本对齐：居中；
}
.百分位卡{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
保证金：1rem；
}
.百分位卡p{
保证金：0；
}
.百分位卡p：第一个孩子{
颜色：#bbb；
}
.百分位卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}

我的总体立场是什么
你做得比我好

60%

我观察所有答案，我认为这些答案都是无效的。所以，我发布了一个答案


.root\u类{
显示器：flex；
证明内容：中心；
对齐项目：居中；
宽度：适合的内容；
保证金：0自动；
}
@介质（最大宽度：576px）{
.root_类{
弯曲方向：立柱；
}
}
.文本{
字号：2rem；
颜色：#bbb；
保证金：0；
右边距：1rem；
文本对齐：居中；
}
.百分位卡{
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
保证金：1rem；
}
.百分位卡p{
保证金：0；
}
.百分位卡p：第一个孩子{
颜色：#bbb；
}
.百分位卡：悬停{
盒影：0 8px 16px 0 rgba（0,0,0,0.2）；
}

我的总体立场是什么
你做得比我好

60%

它不工作了。卡片在文本的下面。不，我希望卡片在文本的旁边，整个事情应该在文本和卡片的中间。请检查我的图像provided@Equinox只在答案中添加代码片段，不要重复代码和代码片段，因为它不起作用。卡片在文本的下面。不，我希望卡片在文本的旁边，整个事情应该在文本和卡片的中间。请检查我的图像provided@Equinox只在你的答案中放一个片段，不要重复你的代码和片段也可能，也可能，也可能，它没有响应哦，有人在没有告诉我原因的情况下否决了我的答案哦，有人在没有告诉我原因的情况下否决了我的答案