Bootstrap 4 中心图像 - CSS

在 Bootstrap 4 中，我们可以轻松地使用 CSS 技术把一个图像置于页面的中心位置。下面就是如何实现：

HTML 代码

我们需要先创建一个包含图像的 HTML 元素，并使用 mx-auto 类和 d-block 类将其水平居中和设置为块级元素：

<div class="container">
  <img src="path/to/image.png" class="mx-auto d-block" alt="Image">
</div>

请注意，我们这里使用了 .container 类包装我们的图像元素。这是因为 Bootstrap 4 的网格系统依赖于 .container 或 .container-fluid 来包含行和列。

CSS 代码

要让图像垂直居中，我们需要再添加一些 CSS 样式。使用以下代码将图像元素垂直居中：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

这里的 display: flex 将 .container 定义为一个 Flex 容器。justify-content: center 和 align-items: center 将内容定位在容器中的中央。height: 100vh 会将容器设置为窗口的高度，从而使图像占据整个垂直中心。

效果

这样，我们就完成了 Bootstrap 4 中心图像的 CSS 实现。下面是效果展示：

现在，你已经能够使用 Bootstrap 4 使图像水平和垂直居中了！