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

吴小傻0

于 2019-04-03 10:47:05 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_44531304/article/details/88990046

微信小程序专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在微信小程序中让view元素实现水平和垂直居中。通过结合使用`display: flex`和`align-items: center; justify-content: center;`的CSS样式，可以达到居中效果。需要注意的是，子容器需设定固定高度，否则垂直居中可能无法正常工作。此外，还讨论了通过动态设置高度或使用填充宽高的方法，以及绝对定位可能带来的布局影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

–wxml–

<view class='main'>
    <view>水平垂直居中</view>
</view>

–wxss–

.main {
  display: flex;
  align-items: center;
  justify-content: center;  
  width: 100%;
  height: 300px;
}

当display: flex和justify-content: center使用时可以让view水平居中
而display: flex和align-items: center，justify-content: center一起用时可以实现垂直水平居中

但是，子容器的要设置一个固定高度，不然只能实现水平居中，垂直居中不生效

可以通过system.windowHeight动态设置高度，也可以直接用position：absolute填充宽高，但是使用绝对定位会对布局造成一定影响