小程序absolute居中

rzhangshan

已于 2023-04-18 01:33:10 修改

阅读量252

点赞数

CC 4.0 BY-SA版权

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

于 2023-04-18 01:31:01 首次发布

本文链接：https://blog.youkuaiyun.com/rzhangshan/article/details/130212444

HTML 专栏收录该内容

1 篇文章

订阅专栏

该文章展示了如何在小程序中使用CSS的absolute定位将元素居中。通过设置view的样式，包括position、bottom、width以及text-align等属性，实现了海外用户登录按钮的居中显示。

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

小程序absolute居中


```html
<view style="position: absolute; bottom: 60px; width: 100%;">
    <view style="position: absolute; text-align: center; left: 0; right: 0;" bindtap="weixinlogin">
    <text style="color: white; border-bottom: 1px solid white;">海外用户登录</text>
    </view>
</view>

![小程序absolute居中](https://img-blog.csdnimg.cn/aa4f33d3c76b4aa9bdab6e593119442c.png#pic_center)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

rzhangshan

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序滚动居中导航选项卡

少吃点肉的博客

02-11

4091

微信小程序头部导航经常会用到选项卡，一个会自动居中的选项卡的体验会比普通的选项卡要好很多。效果示意图：被选中的tab会始终居中显示。利用微信小程序自带的组件scroll-view的scroll-left就很容易实现这个效果。 wxml代码：  <image wx:if="{{showMaskScroll}}" class=...

微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍

tl437002770的博客

01-25

1349

微信小程序开发position等于static、relative、absolute、fixed、stricky时元素显示详细介绍

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

uni-app：实现元素在屏幕中的居中（绝对定位absolute）

weixin_46001736的博客

09-27

6171

uni-app：实现元素在屏幕中的居中（绝对定位absolute）

小程序的相对定位与绝对定位

晶凌玄夜的博客

11-12

1943

相对定位：元素是相对自身进行定位，参照物是自己。绝对定位：元素是相对离它最近的一个已定位的父级元素进行定位不采用任何定位： .wxml文件 <view class="style_01"></view> .wxss文件 page{ background-color: #eee //便于区分，将整个页面设置为灰色 } .style_01{ height: 50...

小程序 view居中

roseWatermelon的专栏

04-28

645

view水平居中办法 ps：我觉得垂直居中也差不多，换个方向基本上能用。使用margin position: relative; /* relative可以相对于父对象居中十分nice */ margin:0 40%; 使用绝对定位 position: absolute; /* !!!这时候请不要设置width,否则就会失效!!! */ left: ...

微信小程序使用absolute定位出现的偏移和宽高问题

weixin_44687485的博客

08-04

1678

微信小程序下使用absolute居中定位时出现的问题使用微信开发者工具开发微信小程序 分别用before和after伪类来作为加号（+）的横和竖，发现横和竖不管怎么调整都有点偏离原本应该居中的位置。 .add-btn{ width: 40rpx; height: 40rpx; background: linear-gradient(90deg, #E84369 0%, #DF2757 100%); border-radius: 999rpx; position: relative; text-align

微信小程序 位置定位position详解，相对定位relative，绝对定位absolute相关问题

冷月醉雪的博客

01-17

4256

小程序组件居中

04-11

### 小程序中组件居中的实现方法在微信小程序开发过程中，可以通过 CSS 样式实现组件的水平和垂直居中。以下是几种常见的实现方式： #### 方法一：Flexbox 布局 Flexbox 是一种强大的布局模式，在小程序中可以...

微信小程序如何居中

03-15

### 微信小程序中的居中布局在微信小程序中，实现元素的居中布局可以通过多种方式完成。以下是几种常见的方式及其对应的 CSS 样式。 #### 使用 Flexbox 实现水平和垂直居中 Flexbox 是一种强大的布局工具，在微信...

微信小程序控件居中

05-21

### 微信小程序控件居中实现方法在微信小程序开发过程中，控件的居中布局是一种常见的需求。为了满足这一需求，可以采用多种方式实现控件的水平和垂直方向上的居中对齐。以下是几种常见且有效的实现方案。 #### ...

微信小程序 图片居中代码

最新发布

05-24

### 微信小程序图片居中实现代码示例在微信小程序中，要使图片居中显示，通常可以采用 Flex 布局的方式。以下是一些具体的实现方法： #### 方法一：使用 Flex 布局让图片水平垂直居中通过设置父容器的 `display:...

小程序弹出框位置无法定位到屏幕中间？一招搞定！

weirdo_world的博客

05-11

1199

开始用的绝对定位 position: absolute; 修改后 position: fixed;

微信小程序学习(position定位方式)

m0_57547938的博客

08-18

3418

position定位方式 fixed与absolute区别 left与margin-left

微信小程序 居中、居右、居底和横向、纵向布局，文字在图片中间，网格布局

油焖茄子的博客

07-28

1万+

或者红色框加上：flex:1。//注意：这里的 height 写 100%会使得垂直居中可能会不生效。子类：display:inline/inline-block;需要知道控件的宽高，-100rpx为自身宽高（200）的一半。父类控件：position: relative;父类控件：position:relative;父类：text-align:center;水平居中B、相对父类控件–子控件绝对定位。子类控件：margin:0 auto;父类控件：display:flex;水平居中A：相对父类控件。

第4个小程序之旅的第一个问题：小程序页面设置页面高度100%

流水日常，不做大论

11-07

4699

放代码： <view class='login-container'> <view class='form-container'> </view> </view> wxss .login-container{ position: fixed; height: 100%; width: 100%; display:flex; ...

小程序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...

微信小程序css篇----定位（position）