微信小程序页面使内容充满整个屏幕（高度、宽度100%），并使内容水平和竖直都居中

最新推荐文章于 2026-01-21 23:43:17 发布

原创最新推荐文章于 2026-01-21 23:43:17 发布 · 7.6w 阅读

33 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

个人

当前文章被收录于：

个人

77 篇文章 0 人学习

订阅专栏查看详情

笔记

当前文章被收录于：

笔记

43 篇文章 0 人学习

订阅专栏查看详情

微信小程序

当前文章被收录于：

微信小程序

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种使用WXSS实现内容充满整个屏幕（高度、宽度100%）的方法，通过固定定位结合Flex布局来实现元素的居中显示。

很多时候，我们会希望将内容充满整个屏幕（高度、宽度100%），如下图

这里写图片描述

代码如下

wxml页面代码

    <view class="empty_tip ">
      <image class="" src="../../image/empty_cart.png" mode="widthFix"></image>
      <view class="classname">购物车竟然是空的</view>
      <view class="color_888888">快去首页瞧瞧吧</view>
    </view>

wxss样式代码

.empty_tip{
  position: fixed;
  height: 100%;
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
}