昨天被通知“软”裁员了,今天也没什么心情干活,毕竟自己不会愚蠢到“别人要杀你,你还帮对方磨刀”的地步。

之前做VC++和安卓JAVA的,没有做过CSS一类的页面布局,今天练手了一下微信小程序,发现一个奇怪的问题,在多层嵌套view下,并且width 和height都为100%时,用display:flex , align-items:center,都没法设置居中,最后通过设置父级View的

position:fixed;

justify-content: center;

并且还要固定子view内容的中间行高 height: 200rpx;,

才能实现垂直居中,

重点代码:

.flex_display {

display: flex;

display: -webkit-flex;

}

.column{

flex-direction:column;

}

.container_center{

width: 100%;

height: 100%;

margin: 0 auto;

align-items:center;

}

.container_center_cup{

width: 100%;

height: 200rpx;

}

.position_fixed{

position:fixed;

}

.ac {

align-items: center;

}

.jc{

justify-content: center;

}


以上图片为垂直和水平居中效果, 如果还有问题,请给我留言 .还不知道怎么发源码附件,有需要的请留言。

#微信小程序# #万年历# #CSS#