如何在 Twitter Bootstrap 中水平和垂直居中元素？

在 Twitter Bootstrap 中将元素居中的综合指南

使用 Twitter Bootstrap 时，需要在父容器内垂直或水平居中元素经常出现。这个多功能框架提供了多种方法来实现这种对齐。

水平居中

1. text-center 类：应用文本中心class 到父容器以使其内容水平居中。对于文本和非文本元素来说，这是一种简单有效的方法。
2. mx-auto 类：如果您需要更大的灵活性并希望偏移居中，请使用 mx-auto班级。它会在元素的左侧和右侧添加自动边距，并将其推到中心。

垂直居中

Bootstrap 不提供内置的垂直居中的实用程序。但是，有两种常见的技术：

1. Pagination-Centered 类： 要在具有分页控件的容器内垂直居中单个元素，请将 pagination-centered 类应用于分页控件包装器。
2. 自定义 CSS： 您还可以使用自定义 CSS 垂直居中元素。例如，在要居中的元素上设置 margin-top: auto 和 margin-bottom: auto 属性。

注意：

文本-center 和以分页为中心的类在最新版本的 Bootstrap 中已被弃用。建议改用 mx-auto 和 d-flex 实用程序。

以上是如何在 Twitter Bootstrap 中水平和垂直居中元素？的详细内容。更多信息请关注PHP中文网其他相关文章！