微信小程序-设置多个子元素水平居中或垂直居中

最新推荐文章于 2025-06-13 17:09:00 发布

Hillbox

最新推荐文章于 2025-06-13 17:09:00 发布

阅读量1.1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏：微信小程序 css

本文链接：https://blog.youkuaiyun.com/qq_33514421/article/details/79789790

微信小程序同时被 2 个专栏收录

15 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍了如何使用CSS的Flexbox属性实现元素的水平居中、垂直居中及同时水平垂直居中。通过调整.father类的display、flex-direction、align-items和justify-content属性，可以轻松实现在不同排列方向上的居中效果。

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

注：每种情况的美化CSS样式已经删去。

<view class='father'>
  <view class='children'>子元素</view>
  <view class='children'>子元素</view>
  <view class='children'>子元素</view>
</view>

一、水平居中

1、排列方向为水平方向

.father{
  display: flex;
  align-items: center;
}

2、排列方向为竖直方向

.father{
  display: flex;
  flex-direction: column;
  align-items: center;
}

二、垂直居中

1、排列方向为水平方向

.father{
  display: flex;
  flex-direction:column;
  justify-content: center;
}

2、排列方向为竖直方向

.father{
  display: flex;
  justify-content: center;
}

三、中心居中

1、排列方向为水平方向

.father{
  display: flex;
  align-items: center;
  justify-content: center;
}

2、排列方向为竖直方向

.father{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hillbox

关注关注

6
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

多个块级元素的居中

qwj515615152的博客

12-11

1069

我们知道,当父元素属性设置为: .wrapper{ margin: 0 auto; text-align: center; } 可以很方便的支持行内元素(display:inline)的居中,然而实际情况是页面设计时可能要让多个块元素(display:bolck),如div,等高度居中此时的解决方案是设置设置为display:inline-b

微信小程序复习总结

2302_81909561的博客

04-27

1294

微信小程序简介微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。工具栏：在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。模拟区：在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序元素水平居中或垂直居中

七夜的博客

10-30

1913

最近在做一个微信小程序的项目，其中涉及到css样式实现将标签内的图片和文本元素垂直排列，并水平居中。在尝试实现的过程中，将元素在标签内的所有排列情况都顺带实现了。上代码：index.wxmlindex.wxss。

微信小程序，使用pageOrientation属性设置横屏，某些机型上会有问题

最新发布

m0_58571759的博客

06-13

280

【代码】微信小程序，使用pageOrientation属性设置横屏，某些机型上会有问题。

关于多元素垂直居中

aiguanyi0149的博客

06-23

256

一、场景描述一个高度固定的div，做为父元素。数个高度随机的div,做为子元素，需要在父元素内被垂直居中。二、相关概念回顾 1.几种box inline box：display为inline或inline-block的元素会形成inline box；行内文本会形成inline box； line box：一行内所有的inline boxes会构成line box。其中inli...

css使所有子元素全部居中的方法

csh145236的博客

08-24

3080

居中显示-css样式

wj0712的博客

06-22

597

这些方法都可以在微信小程序中有效地实现盒子内部盒子的居中显示。选择方法取决于你的具体需求、布局和浏览器的兼容性考虑。微信小程序支持使用类似于 CSS Flexbox 的布局方式。

微信小程序+Flex布局示例源代码

05-06

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，提供了一套自己的开发工具和语言，使得开发者可以构建出与原生应用体验相近的小程序。在这个"微信小程序+Flex布局示例源代码"中，我们将...

微信小程序项目实例-wechat-app-flexlayout（源码+截图）

11-05

微信小程序是一种轻量级的应用开发平台，主要针对移动端，它允许开发者通过编写JavaScript、WXML（微信小程序标记语言）和WXSS（微信小程序样式语言）来构建应用。在这个"微信小程序项目实例-wechat-app-flexlayout...

微信小程序块中的文字水平垂直居中

03-18

嗯，用户的问题是关于在微信小程序中实现块内文字的水平垂直居中布局。首先，我需要回想一下微信小程序的布局方式，通常使用的是Flex布局或者定位方式。微信小程序的样式语法类似于CSS，但有些属性可能需要适配。 ...

微信小程序开发-计算器-笔记（一）

a5276957的博客

11-19

692

.wxss文件 view: 视图容器第一部分 .btnGroup { display: flex; flex-direction: row; width: 760rpx; } display：组件内的元素显示方式。 display:flex 意思是弹性布局父级元素定义display:flex，子元素宽度用flex来定义。假设有2个子元素，元素一设置flex:1，元素二fl...

小程序组件居中问题

感恩、奋进、自信

08-26

5958

在小程序中实现居中的功能是经常用到的，比如在text组件中让文本内容在竖直（水平）方向自动居中、让图片显示在页面的中央等。使用弹性布局flex可以轻松搞定。对容器的display设为flex，如display:flex利用水平方向属性justify-content和竖直方向属性align-items实现水平居中、竖直居中、在中心显示。.wxml代码如下:<view> <te...

CSS —— 元素水平、垂直、水平垂直居中

ZhaoYLi 的编程学习笔记

01-26

492

一、水平居中 1、子元素宽度固定对子元素设置：margin: 0 auto;即可。 2、子元素宽度未知 ①子元素为行内元素：对父元素设置：text-align: center;即可。 ②子元素是块级元素： a：单个子元素，无需设置，子元素宽度自动铺满整个父容器。 b：多个子元素，把子元素设置为行内块级元素inline-block，父容器使用text-align:center。如下： 3、...

微信小程序——文字水平垂直居中

知识的海洋

06-29

7407

对于直接在标签里面的文字，使用flex布局控制其中的文字水平和垂直居中

小程序的居中布局，你可以这样做

shiki0083的笔记

06-14

8455

前段时间小程序上线后就弃坑了，回到网页开发去了，最近又有新项目，再次入坑，难免需要一些demo来重新熟悉，在这个过程中，发现demo中很少有人使用flex布局，今天给大伙稍微讲一下这个布局。 flex布局有啥用呢，最大的作用便是快速实现你所需要的布局（水平居中、垂直居中、左右对齐等） flex布局的使用非常简单，在这我将几个常用的场景，其他更深入的可以去查资料了解（我才不会说是因为我懒）首先是对布...

CSS使微信小程序 view文字水平垂直居中

无极低码

10-27

2064

text-align:center; display:flex; align-items:center; justify-content:center;

小程序css 文字居中,小程序css设置垂直居中显示

weixin_42474220的博客

08-04

1219

有2种方式设置一个容器的元素垂直居中：第1种.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 向左向上平移自身宽高的50% */}第2种.container {position: fixed;height: 100%;width: 100%;display:flex;f...

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

qq_43588120的博客

02-20

7886

微信小程序布局中view有时候需要在水平方向和垂直方向上都居中，发现flex布局可以实现，例如view1（图中灰色方块）需要实现居中，可以用如下设置实现： wxss文件中的设置如下： .main { width: 100%; height: 100%; position: fixed; background-color: #c573ac; **display: flex; flex-direct...