Html “为什么我不能移动？”；卡片“；在屏幕中央

我有一个非常奇怪的问题（和我的一些同事），我们无法将“卡片”引导类放到屏幕中心，我们尝试了很多在互联网上可用的解决方案，但都没有成功

下面是不想移动的div：

<div class="container h-100">
        <div class="flex-center-wrap">
        <div class="card">
        <div class="card-body text-center">
        <h5 class="card-title mb-2">hihihihihih</h5>
        <div class="card-subtitle mb-3">hihihihi<a href="#" target="_blank">hihihihi</a></div>
        <form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
        <input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
        <input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
        </form>
    </div>
</div>
</div>
</div>

嗨嗨
嗨嗨

---

下面是一个快速展示它的外观（div与导航栏重叠，不想居中），Vizialization是

，您试图在非flex项的div上使用

对齐项

，这是flex项属性

另外，您正试图在屏幕上对齐，但是您的

html

和

body

没有设置

高度：100%

为了演示，您可以将

style=“height:100vh；display:flex；”

添加到父级

div

。正如您在下面看到的，卡正正确居中

@导入url（'https://fonts.googleapis.com/css?family=Poppins:400,500,700');
/*---媒体查询--*/
@介质（最大宽度：992px）{
}
@介质（最大宽度：768px）{
}
@介质（最大宽度：576px）{
}
a{
颜色：#d7eaf4；
}
身体{
颜色：#fff；
背景：2834D8URL（img/hotel.jpg）；
背景重复：无重复；
背景位置：中心；
背景附件：固定；
背景尺寸：封面；
字体系列：poppins、Helvetica、Arial、无衬线字体；
字号：1rem；
字体大小：400；
线高：1.5；
}
/*---Firefox错误修复--*/
.传送带项目{
过渡：-webkit转换0.5s轻松；
转型：转型0.5s轻松；
转换：转换0.5s易用性，-webkit转换0.5s易用性；
-webkit背面可见性：可见；
背面可见性：可见；
}
/*---固定背景图像--*/
身材{
位置：相对位置；
宽度：100%；
身高：60%；
边距：0！重要；
}
.页脚{
字体大小：14px；
左侧填充：1 em！重要；
}
.固定包装{
剪辑：rect（0，自动，自动，0）；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.固定底部{
位置：固定；
右：0；
底部：0；
左：0；
}
.h-100{
身高：100%！重要；
}
navbar先生{
背景：rgba（18,13,33,8）；
颜色：#d7eaf4；
盒影：0 5px 15px#000000c0；
边际上限：0；
页边距底部：0；
}
#固定的{
背景图片：url（'img/mac.png'）；
位置：固定；
显示：块；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景尺寸：封面；
背景位置：中心；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
改变：转变；
}
/*---引导填充修复--*/
[类别*=“列-”]{
填充：1rem；
}
.卡片{
边距：0自动；/*已添加*/
浮动：无；/*已添加*/
页边距底部：10px；/*已添加*/
}

莫伦卡西帕酒店








版权所有©2020 Kuba Wroński&Mateusz Gołębiowski
嗨嗨
嗨嗨

添加css类

.centered{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

莫伦卡西帕酒店








版权所有©2020 Kuba Wroński&Mateusz Gołębiowski
/////////////////////在此处添加类
嗨嗨
嗨嗨

此外，codepen中的一些打字错误，如

证明共有中心

应该是

证明内容中心