談談flex布局實現水平垂直居中

我們在這要談的是用flex布局來實現水平和垂直居中。隨着移動互聯網的發展，對於網頁布局來說要求越來越高，而傳統的布局方案對於實現特殊布局非常不方便，比如垂直居中。所以09年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應式地實現各種頁面布局。
我們想用flex布局居中的話就得先了解什么是flex布局，flex布局也叫彈性布局。就是能夠實現一些特殊的布局方式。言歸正傳，flex布局首先就得對它的屬性就行了解。flex布局包含了多種屬性，其中flex布局需要在父元素中加上 display: flex；，在此我們就先開始了解水平居中和垂直居中兩種屬性。其兩種屬性分別為： justify-content 、 align-items 而兩種屬性的取值也有多種。其中justify-content的取值分別為： flex-start（默認值，表示為起始位置對齊）、flex-end（表示為結束位置對齊）、 center （表示為水平居中對齊）、space-between（兩端對齊）、space-around（環繞）、space-evenly（勻稱）。舉個實例：
首先我們進行寫一個沒有加flex布局的頁面，呈現的結果為：


加入flex布局之后如圖：

用 display: flex;justify-content: center ;就能實現水平居中。
說完水平居中那我們再來看一看垂直居中：其垂直居中的屬性為 align-items 而align-items的取值則為：stretch（默認值，flex子項拉伸）、flex-start（表示為容器頂部對齊）、flex-end（表示為容器底部對齊）、center（表示為垂直居中對齊）。在沒有用flex布局我們只能把字體的行高設置為和容器的高一樣大小，這樣也能實現字體在容器里面實現垂直居中。這樣雖然能購物實現垂直居中，但是卻存在許多不足，比如 容器本生自適應了屏幕高，那么我們的行高就不能這樣去之寫。所以我們就要用到flex布局里面的align-items來實現垂直居中。舉例：


display: flex;justify-content: center;align-items: center; 這樣我們就能夠用flex布局來實現文字的水平居中和垂直居中。
這就是HTML語言編程的魅力，如果想快速提升自己，讓自己也成為編程高手，詳情請了解逆戰班。