微信小程序view的样式怎么写（微信小程序多层view嵌套）

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

之前做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;

}

<view class="flex_display column container_center jc position_fixed ">

<!-- 杯-->

<view class="flex_display row container_center_cup jc ">

<!-- 这里旋转的内容就会在整个页面垂直和水平居中-->

</view>

</view>

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

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