快速提示：將元素垂直和水平居中的最簡單方法

Flexbox 是 CSS 世界中一個相對較新的成員，我們不斷為它尋找越來越多優秀的應用程序。我們甚至可以使用 CSS 解決垂直和水平居中元素的古老問題。它比您想像的要容易 - 它只有三行代碼，不需要您指定居中元素的大小並且響應友好！

此技術適用於所有現代瀏覽器 - IE10+、Chrome、Firefox 和 Safari（使用 -webkit- 字首）。在此處查看完整的兼容性表。

<div class="container">
    <!--// Any content in here will be centered.-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dapibus, eros et aliquam volutpat, ante tellus bibendum justo, et mollis orci velit ut odio. Maecenas sagittis mi velit, sit amet varius lorem ornare in. Sed dapibus turpis vel nunc finibus cursus. Nunc erat purus, sodales sit amet neque et, aliquam pretium felis. Mauris eros est, elementum eu eros ut, feugiat fermentum metus. In hac habitasse platea dictumst. Integer tristique semper semper. Etiam quis ligula sit amet ipsum condimentum euismod. Praesent iaculis ante et magna suscipit vulputate. Curabitur vitae porttitor erat. Vivamus vel blandit tellus, ut sollicitudin metus.</p>
</div>

*{
    margin: 0;
    padding: 0;
}

body, html{
    height: 100%;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;
}

.container p{
    max-width: 50%;
    padding: 15px;
    background-color: #f1f1f1;
}

HTML

當然，這個想法是圍繞 flexbox 展開的。首先，我們創建一個容器，我們希望所有內容都居中：

<div class="container">
    <!--// Any content in here will be centered.-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

您可以將此容器 div 放置在您想要的任何位置。在上面的實例中，我們讓它佔據了頁面的整個寬度和高度。

CSS

正如我們之前所說，我們將只使用三行代碼。他們在這裡：

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

每個 flex 容器都有兩個用於定位元素的軸。主軸用 flex-direction 聲明 屬性（可以是 row 或 column ，請參閱文檔）。通過省略此規則，我們將 flex 方向保留為其默認的 row 價值。

現在我們需要做的就是使兩個軸居中。再簡單不過了：

1. 使顯示類型flex ，以便我們激活 flexbox 模式。
2. justify-content 定義彈性項目將根據主軸對齊的位置（在我們的例子中是水平方向）。
3. align-items 對垂直於主軸的軸（在我們的例子中為垂直軸）執行相同的操作。

現在我們已經將垂直和水平對齊的規則設置為 center ，我們在容器內添加的任何元素都將完美地定位在中間。我們不需要事先知道它的尺寸，瀏覽器會做所有的工作！

結論

還有很多其他技術可以使用 CSS 使內容居中，但是 flexbox 讓這變得更加簡單和優雅。如果您想了解更多信息，請查看以下資源：

• 完整的 flexbox 指南 - 在這裡。
• MDN：使用 CSS 靈活框（長篇閱讀）- 在這裡。
• Flexbox 在 5 分鐘內完成 - 在這裡。