使用 Bootstrap 在背景上垂直居中卡片
Posted
技术标签:
【中文标题】使用 Bootstrap 在背景上垂直居中卡片【英文标题】：Center card vertically on background using Bootstrap 【发布时间】：2019-05-31 18:33:18 【问题描述】：只是为了在标记为转帖之前说清楚， 这一切都不起作用： How to center cards in bootstrap 4? How to align an image dead center with bootstrap Centering the image in Bootstrap How can I center an image in Bootstrap? How do I center an image in Bootstrap? How to align a <div> to the middle (horizontally/width) of the page How to horizontally center a <div>?
话虽如此，我的问题很简单，我有两个 div，背景 div 和 bootstrap 中的卡片 div。 mx-auto 将垂直居中很好，但无法从卡顶部解开。这样我在卡的上方和下方也有空间。我已经尝试了所有 m 和 p 类。以及自定义类。有人可以帮我吗。我希望我的卡片位于屏幕中间。
<div class="bg">
<div class="card card-design success-design mx-auto">
<div class="card-body">
现在看起来像这样：
ooooxxxoooo
ooooxxxoooo
ooooooooooo
ooooooooooo
我想要：
ooooooooooo
ooooxxxoooo
ooooxxxoooo
ooooooooooo
【问题讨论】：
你的“图像”表明你想垂直居中，但你说的是“水平”。 嗯，这是语言的极限，我想了想，似乎两者都可以同时为真 【参考方案1】：如果您使用的是Bootstrap 4，那么您应该使用它的实用程序类。
只需将d-flex justify-content-center align-items-center 类添加到根div，其内容将水平和垂直居中：
.bg
background-color: #fff0f0;
width: 300px;
height: 300px;
.card
width: 50%;
height: 50%;
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg d-flex justify-content-center align-items-center">
<div class="card">
<div class="card-header">My card</div>
<div class="card-body">Some text</div>
</div>
</div>【讨论】：
【参考方案2】：试试这个：
body, html
height: 100%;
h3, h4, p, a, label
color: #001f3f;
.bg
/* The image used */
background-image: url('exemple.png');
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
/* i added following code */
display:flex;
justify-content:center;
align-items:center;
.card-design
background-color: rgba(245, 245, 245, 0.7);
width: 23rem;
font-family: 'Roboto', sans-serif;
font-weight: 300;
border-radius: 0 !important;
.success-design
background-color: rgba(245, 245, 245, 0.8);
.nbr-apt
font-size: 220%;
font-weight: 100;
.rdv
font-size: 160%;
.num
font-weight: bold;<body>
<div class="bg">
<div class="card card-design success-design mx-auto">
<div class="card-body">
<h3 class="card-title"> bla bla bla</h3>
<h4 class="card-subtitle mb-2 text-muted"> bla bla bla</h4>
<h4 class="card-subtitle mb-2 text-muted"> bla bla blam</h4>
<br>
<br>
<p class="card-text nbr-apt">Merci bla bla bla</p>
</div>
</div>
</div>
</body>【讨论】：
带有 3 行代码。我在.bg 中添加了我在那里展示的内容。【参考方案3】：
您可能需要使用一些 CSS 来让主体拉伸到全高，这样您就可以将卡片居中，这是使用 flexbox 的示例
html, body
height: 100%;
body
margin: 0;
display: flex;
align-items: center;
justify-content: center;
.card
padding: 1rem;
border: 1px solid;
<div class="card">I am a card</div>【讨论】：
谢谢，这使我的背景图像不再显示在卡片之外。但是卡片仍然贴在顶部。 您能提供一个代码示例吗？也许是代码笔。这将有助于更好地理解问题 这是一个codepen，但生成的显示当然是错误的codepen.io/ilanoh/pen/rodvVM以上是关于使用 Bootstrap 在背景上垂直居中卡片的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Bootstrap 4 中垂直居中 div？ [复制]