Flexbox實現垂直水平居中

Flexbox(伸縮盒)是CSS3中新增的特性，利用這個屬性能夠解決頁面中的居中問題。只須要3行代碼就能夠實現，不須要設置元素的尺寸，可以自適應頁面。

這個方法只能在現代瀏覽器上有效，IE10+、chrome、Safari、Firefox。例如：

HTML：

首先，建立一個div容器，容器內是須要居中的內容

<div class="container">
    <!--容器內的元素將會居中-->
    <img src="fireworks.jpg" alt="fireworks">
</div>

3行CSS代碼：

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

note：

1.設置container的display的類型爲flex，激活爲flexbox模式。

2.justify-content定義水平方向的元素位置

3.align-items定義垂直方向的元素位置

搞定。。。

 

更多閱讀：

flexbox徹底指南

Using_CSS_flexible_boxes

Flexbox in 5 minutes

The Simplest Way To Center Elements Vertically And Horizontally