微信小程序-水平垂直居中

1.flex流佈局

使用屬性：

justify-content：center；

align-items：center；

*/justify-content  決定項目在主軸上的對齊方式

　align-items  決定項目在交叉軸上的對齊方式

 改變佈局的橫縱軸後控制水平和垂直對齊方式的屬性改變，但控制主軸或交叉軸的對齊方式的屬性不改變。*/

 

2.通常佈局，或者modal模態彈出框

使用屬性：

vertical-align: middle;

align-items: center;

或

使用屬性：

text-align:center;

align-items:center;

 *text-align爲水平對齊方式。用於塊級元素上，設置塊級元素的內聯元素的對齊方式。

 

3.塊級元素

width:400px;

margin-left:auto;

margin-right:right;

設置元素的寬度值，並令左右外邊距值爲auto，瀏覽器會自動爲其分配相同的左右外邊距值，使其居中顯示。

 

4.圖片居中

 

方法1.將放置圖片的容器的佈局改成

 

display: table-cell;
text-align: center;

 

可使容器內的元素均居中顯示。效果以下：

 

 

若是須要水平垂直居中，添加

 

display: table-cell;
text-align: center;
vertical-align: middle;

 

效果以下：