語義UI - 垂直居中一個div

Question

是否有任何已知的方法使用Semantic UI的Web開發框架將<div>標記居中，而無需添加我自己的CSS樣式？

我試過documentation中的幾個與位置相關的標籤，例如<div class="centered grid'>，但是這些標籤只適用於水平居中。

這不是一個具有挑戰性的實現，我只是感到驚訝，因爲垂直居中不包含在Web開發框架中，我很好奇我的Google搜索和眼睛是否已經看到它。我希望在創建自定義樣式之前遵守框架樣式。我知道有幾種方法來實現我自己的垂直居中（這在我看來是最不可取的選擇），但我更喜歡使用框架中的類。

Answer 1

根據語義UI v2.2.2，您可以通過添加middle aligned類來強制在中間垂直對齊。它影響下列元素：

• table，其行和細胞，
• grid，其行和列，
• image，
• list和item與圖像，
• 模態對話框內容。

您可以這樣不設置垂直對齊，中間的任意div元素之外的任何這些結構。

否則，某些其他語義UI元素垂直地在中間缺省調整其含量：

• header或message與圖標或圖像，
• circular segment，
• step，
• button等等