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

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;

可以使容器内的元素均居中显示

方法2：如果需要水平垂直居中，添加

display: table-cell;

text-align: center;

vertical-align: middle;