大家好，欢迎来到IT知识分享网。
有2种方式设置一个容器的元素垂直居中：
第1种
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 向左向上平移自身宽高的50% */
}
第2种
.container {
position: fixed;
height: 100%;
width: 100%;
display:flex;
flex-direction:row;
align-items:center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
Demo：
wxml:
A
B
C
D
E
wcss:
page {
background-color: lightgreen;
height: 100%;
}
.horizontal-vertical-container-1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: lightcoral;
}
.horizontal-vertical-container-2 {
position: fixed;
height: 100%;
width: 100%;
display:flex;
flex-direction:row;
align-items:center;/*垂直居中*/
justify-content: center;/*水平居中*/
background-color: lightskyblue;
}
.test-item-container {
background-color: red;
width: 250rpx;
height: 250rpx;
}
.demo-text-1 {
background: rgba(26, 173, 25, 0.7);
}
.demo-text-2 {
background: rgba(39, 130, 215, 0.7);
}
.demo-text-3 {
background: rgba(255, 255, 255, 0.7);
}
.demo-text-4 {
background: rgba(110, 125, 255, 0.7);
}
.demo-text-5 {
background: rgba(125, 255, 255, 0.7);
}
.demo-text-size {
width: 120rpx;
height: 120rpx;
}
json:
{
“usingComponents”: {},
“navigationStyle”: “custom”
}
效果图:
使用horizontal-vertical-container-1的效果图
使用horizontal-vertical-container-2的效果图
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/22162.html
