圖片和文字的中線對齊一直是一個頭疼的問題。之前一直用flex佈局做垂直居中對齊，但是從來沒有認真研究過。

flex佈局的相容性：

我在ios和幾款android手機上測試了一下可以相容。

常用屬性：

justify-content: flex-start | flex-end | center | space-between | space-around;
    /*主軸對齊方式：左對齊（預設） | 右對齊 | 居中對齊 | 兩端對齊 | 平均分佈*/

align-items: flex-start | flex-end | center | baseline | stretch;
    /*交叉軸對齊方式：頂部對齊（預設） | 底部對齊 | 居中對齊 | 文字基線對齊 | 上下對齊並鋪滿*/

相容寫法：

.box{
    display: -webkit-flex; /*webkit*/
    display: flex;
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    align-items: center;
}
 

1.水平垂直居中對齊

.box {

  display:flex;

  justify-content:center;

  align-items:center;

}

由於行高line-height的影響，可以發現文字和圖片中線並沒有對齊，只是他們所佔的空間的中線對齊了。

為了使文字的中線和圖片對齊，可以設定行高等於字型的大小。

2.水平分散對齊+垂直居中對齊

.box {

  display:flex;

  justify-content:space-around;

  align-items:center;

}

3.水平兩端對齊+垂直居中對齊

.box {

  display:flex;

  justify-content:space-between;

  align-items:center;

}

4.水平平均分散+垂直居中對齊

（ps：新屬性，chrome和firefox中已經有這個屬性了，其他還沒有，暫時不要用）

.box {

  display:flex;

  justify-content:space-around;

  align-items:center;

}

（ps：雖說是基線對齊，但是漢字和英文底線還是沒有對齊...╮(╯3╰)╭）

.box {

  display:flex;

  justify-content:center;

  align-items:baseline;

}

6. 垂直上下鋪滿+水平居中對齊

（ps：子元素設定了高度則為設定的高度；未設定高度，則高度等於父元素的高度）

.box {

  display:flex;

  justify-content:center;

  align-items:stretch;

}