Question

仅在标记为重新发布之前明确说明，所有这些都不起作用： 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和引导程序中的卡片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

Answer 1

您可能需要使用一些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>

Answer 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>

Answer 3

如果您使用的是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>

使用Bootstrap在背景上垂直居中放置卡片

3 个答案: