使用 Bootstrap 在背景上垂直居中卡片答案

【问题标题】：Center card vertically on background using Bootstrap使用 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

【问题讨论】：

你的“图像”表明你想垂直居中，但你说的是“水平”。
嗯，这是语言的极限，我想了想，似乎两者都可以同时为真

标签： html css twitter-bootstrap

【解决方案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;
}

&lt;div class="card"&gt;I am a card&lt;/div&gt;

【讨论】：

谢谢，这使我的背景图像不再显示在卡片之外。但是卡片仍然贴在顶部。
您能提供一个代码示例吗？也许是代码笔。这将有助于更好地理解问题
这是一个codepen，但生成的显示当然是错误的codepen.io/ilanoh/pen/rodvVM