談談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語言編程的魅力，若是想快速提高本身，讓本身也成爲編程高手，詳情請了解逆戰班。

原文出處：https://www.cnblogs.com/ycs5/p/12380728.html