Html 如何在引导的中间垂直地将这些按钮集中在容器的中间？ 这将是一个愚蠢的问题，但出于某种原因，在页面中间对齐这些按钮时我遇到了麻烦。

我想让它们在叠加的中间堆叠在一起，但不是，它们被卡在覆盖物的顶部。你们能帮帮我吗

以下是我的HTML示例：

<h1 class="text-center">Portfolio</h1>
    <div class="row p-5">
      <div class=" col-sm-6 col-xl-4 mb-3">
        <div class="card">
          <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
          <div class="card-body">
            <h5 class="card-title text-center">Project 1</h5>
          </div>
          <div id="overlay">
            <div class="d-flex flex-column align-content-center">
              <button type="button" class="btn btn-primary">Demo</button>
              <button type="button" class="btn btn-secondary">Github Repo</button>
            </div>
          </div> 
        </div>
      </div>

投资组合
项目1
演示
Github回购

以下是我的JS小提琴的链接：

---

您需要将父div“overlay”设置为position:relative，将子元素设置为position:absolute。

您需要将

display:flex

添加到

#overlay

，并将

flex:1

和

justify content:center

添加到子元素（您可以使用

#overlay>div

对其进行覆盖）：

这可以看到

typewriterContainer=document.querySelector（“#typewriter”）；
常量打字机=新打字机（打字机容器{
循环：false，
延误：75
});
打字机
.typeString（“嗨，我是Aman！”）
.typeString（“
我正在学习编程。我热爱科技。我是一名有抱负的企业家。我想改变世界。
”）
.start（）；
/*load（@domid，@path json，@callback（可选））*/
加载（'particles-js'，'particles.json'，function（）{
log（'particles.json-loaded'）；
});
*{
框大小：边框框；
}
img[alt=“Profile Picture”]{
宽度：40%；
}
/*为什么这个工作idk*/
img{
宽度：200px；
高度：200px；
}
.关于{
位置：绝对位置；
z指数：1；
高度：100vh；
宽度：100vw；
}
#粒子js{
背景：rgb（7224329）；
高度：100vh；
宽度：100vw；
}
.svg分区{
宽度：50px；
高度：50px；
}
svg{
宽度：100%；
}
跨度{
字体大小：12px；
}
.导航{
最小高度：40px；
}
.卡片{
盒影：8px 8px 10px#080808；
转换：转换为0.1s；
位置：相对位置；
}
#覆盖层{
位置：绝对位置；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.5）；
过渡：0.02s缓进；
显示器：flex；
}
#覆盖>分割{
弹性：1；
证明内容：中心；
}
.卡：悬停{
转换：比例（1.1）；
}
.雇用{
位置：绝对位置；
最高：100%；
左：47%；
}

顶点项目










雇用我
文件夹
项目1
演示
Github回购
项目2
项目3
项目4
项目5
项目6
联系方式
&时代；
姓名：
电邮：
电话号码：
信息：
接近
保存更改
版权2019©

回到顶端

您的代码已包含
.align资源中心
。只需将以下给定属性添加到
.align资源中心
类中即可

.align-content-center {
    position: absolute;
        top: 50%;
        width: 100%;
        left: 50%;
        transform: translate(-50%, -50%);    
    }

查看它：
这里有另一种没有显示flex的方法

将z索引添加到#覆盖
将绝对位置添加到.d-flex
然后将.d-flex移出#覆盖层
CSS更新：

#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  transition: 0.02s ease-in;
  z-index: 99999;
}

.d-flex.flex-column.align-content-center{
  position:absolute;
  width:100%;
}

布局更新：

<div class="card">
   <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
   <div class="card-body">
     <h5 class="card-title text-center">Project 1</h5>
   </div>
   <div id="overlay"></div>
   <div class="d-flex flex-column align-content-center">
     <button type="button" class="btn btn-primary">Demo</button>
     <button type="button" class="btn btn-secondary">Github Repo</button>
   </div>
</div>


项目1
演示
Github回购

结果:

@Amaresh S M我添加了一个指向我的JS Fiddle的链接只是一个问题，但是你如何知道什么时候在样式表中编写css，而不是使用引导css类？我有一个严格的思维结构，我只想使用CSS boostrap类来完成这项工作。但是看起来你真的可以做任何事情。@AmandepPasricha如果你不想让你的网站看起来像一个普通的引导网站，当你需要自定义时，你真的可以添加额外的CSS类。大多数网站和插件都有不属于bootstrap库的类，这实际上取决于个人偏好。Bootstrap所做的一切就是为您创建类，让您的生活更轻松。如果你想要一个“普通”的布局，你可以说纯引导类更好。如果需要一些修改，显然需要自己的类。等价于
display:flex
（以及子级上的
flex:1
）的是类
.d-flex
，等价于
内容中心对齐：中心对齐
的是
。内容中心对齐
。你用什么取决于你：）@Jerdine Sabio作为一个初学者，有时我会在引导中遇到一些问题，我想“我应该继续搜索引导解决方案”或者在样式表中使用CSS自定义它。所以基本上，我应该
<div class="card">
   <img src="img/image-1.jpg" class="card-img-top" alt="image-1">
   <div class="card-body">
     <h5 class="card-title text-center">Project 1</h5>
   </div>
   <div id="overlay"></div>
   <div class="d-flex flex-column align-content-center">
     <button type="button" class="btn btn-primary">Demo</button>
     <button type="button" class="btn btn-secondary">Github Repo</button>
   </div>
</div>