css - 语义 UI - 垂直居中 div

Question

有什么已知的方法可以使 <div> 居中吗？使用 Semantic UI 标记的 web 开发框架，没有添加我自己的 CSS 样式？

我在 documentation 中尝试了几个与位置相关的标签，例如 <div class="centered grid'> ，但是这些仅适用于水平居中。

这不是一个具有挑战性的实现案例，我只是对像垂直居中这样常见的东西没有包含在 Web 开发框架中感到惊讶，我很好奇我的 Google 搜索和眼睛是否对它视而不见。在创建自定义样式之前，我更愿意遵守框架样式。我知道有几种方法可以实现我自己的垂直居中(我认为这是最不适合实现的选项)，但是我更愿意使用框架中的类。

Answer 1

根据 Semantic UI v2.2.2，您可以通过添加 middle aligned 类强制在中间垂直对齐。它影响以下元素:

• table ，它的行和单元格，
• grid ，它的行和列，
• image ,
• list和 item带有图片，
• 模态对话框内容。

您不能在任何这些结构之外的任意 div 元素中间设置垂直对齐方式。

否则，一些其他语义 UI 元素默认将其内容在中间垂直对齐:

• header或 message带有图标或图像，
• circular segment ,
• step ,
• button等