微信小程序分割线居中

题主是否想询问“微信小程序分割线居中如何吗”？分割线居中如下：

1、首先实现微信小程序居中，可以用flex布局工具。

2、其次将alignitems改成justifycontent。

3、最后常见的方法使用绝对定位配合负值margin，思路是设成absolute后，指定top和left为百分之50，将元素的左上角定位点放到页面的正中心，然后使用负值margin一半的元素宽高度将元素拉回页面正中心。

小程序的 UI 设计指南在小程序官方文档中均有介绍，以微信官方设计文档为参照：

1、 小程序布局：小程序的布局主要采用块状结构进行布局，优先采用卡片、列表或网格等布局方式；

2、 小程序 UI 调色：小程序的 UI 调色使用典型的灰色调子，较亮的颜色基调使用明度较浅的颜色；

3、小程序 UI 尺寸：采用 1080px 宽，720px 高的界面设计尺寸，控件尺寸以 8px 为基准单位，即每个控件的间距需以 8px 设计；

4、 小程序 UI 字号：字体最大尺寸 36px，最小尺寸 24px，中等字体尺寸使用 30px。

项目根目录下创建 appwxss 文件，文件定义的样式规则适用于所有页面。采用css定义样式。

小程序官方推荐使用flex布局。pages/home目录下新建homewxss文件，文件的样式只适用于当前页面。

rpx是小程序为适应不同宽度的手机而发明的长度单位，所有手机宽度都为750rpx。

weui是腾讯官方维护的UI框架，我们可以直接拿来用。

将weui库中dist目录下的appwxss拷贝到我们项目中的 appwxss 中，在wxml文件中直接使用定义好的规则, 如 weui-btn 。

使用 image 标签。默认宽度为屏幕宽度。

轮播使用 swiper 标签。

浮动布局的优点就是比较简单，兼容性也比较好。

缺点是浮动元素是脱离文档流，要做清除浮动，否则可能会出现高度塌陷等问题。

绝对定位布局优点: 很快捷，设置很方便

但是脱离文档流的, 可能会造成重叠元素

在flex布局不兼容的时候，可以尝试表格布局。

CSS基础（float属性与清除浮动）

三栏布局的5种解决方案及优缺点

比较懒，还是上一篇的图：

如上一篇所属，“我的”页面菜单列表主要是用到了wx: for和navigator

利用navigator可以很方便的实现菜单功能，它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址：

在js中甚至不需要做什么事情，我这里把菜单的数据放在了js中，通过修改data中的menuitems即可达到配置的作用，甚至如果有需求，还可以放在服务端做成可随意变化的：

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

以上就是关于微信小程序分割线居中全部的内容，包括:微信小程序分割线居中、小程序的ui框架尺寸、小程序开发（二）-页面样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！