Bootstrap 是一个流行的前端框架，它提供了许多有用的工具和类，帮助开发者快速构建出漂亮的网站。其中，class="center-block" 是 Bootstrap 提供的一个类，可以使一个元素在其父容器中水平居中。然而，在某些情况下，使用 class="center-block" 并不能将 DIV 居中。本文将探讨这个问题的原因，并提供解决方案。
问题描述
假设我们有如下 HTML 代码：
---- ------------------
---- ------------
---- -----------------
---- ------------- -------------------- ------------
------
------
------其中，我们给 my-div 这个 DIV 元素添加了 center-block 类，期望它能够在其父容器（即列元素）中水平居中。然而，当我们预览页面时，my-div 并没有被居中，而是靠左对齐了。
原因分析
造成这个问题的原因是，center-block 类只能使一个元素在其直接父容器中水平居中。但是，在上面的 HTML 代码中，my-div 的直接父容器并不是 col-md-6，而是一个包装 col-md-6 的行元素。因此，即使 my-div 有 center-block 类，它也无法在行元素中居中。
解决方案
为了解决这个问题，我们需要使用一些其他的技巧来让 DIV 元素在其父容器中水平居中。以下是一些可行的方法。
方法一：使用 Flexbox（推荐）
Flexbox 是一个灵活的布局工具，可以轻松实现水平和垂直居中。我们只需将 my-div 的父容器设置为 flex 容器，并将其子元素对齐为水平居中即可。以下是 CSS 样式代码：
-------------- - -------- ----- ---------------- ------- -
我们只需将 my-div 的父元素添加 my-div-parent 类即可：
---- ------------------
---- ------------
---- -----------------
---- ----------------------
---- --------------------- ------------
------
------
------
------my-div 现在会在其父元素 my-div-parent 中水平居中了。
方法二：使用 text-center 类
Bootstrap 还提供了一个类叫做 text-center，可以使文本在其父容器中居中。我们可以将 my-div 添加到一个文本容器中，并将其设置为 text-center 类即可。以下是 HTML 代码：
---- ------------------
---- ------------
---- -----------------
---- --------------------
---- --------------------- ------------
------
------
------
------现在，my-div 已经在其文本容器中水平居中了。
方法三：使用 margin 属性
如果你只是需要快速将一个 DIV 元素水平居中，可以使用 margin 属性来实现。例如，以下 CSS 样式代码可以将 my-div 水平居中：
------- - ------ ------ ------- - ----- -
这里，我们首先给 my-div 设置了一个固定的宽度，然后将其左右边距都设为自动。这样，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29206