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

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;

 

效果如下:

 

 

转载于:https://www.cnblogs.com/cff2121/p/9683303.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值