css3 position: fixed 居中问题，移动端，旁边留白的情况fixed不能居中的问题；

最新推荐文章于 2024-05-07 16:21:36 发布

原创最新推荐文章于 2024-05-07 16:21:36 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

style 专栏收录该内容

21 篇文章

订阅专栏

本文解决移动端使用CSS3 position:fixed实现元素居中的问题，通过设置z-index, margin, top, bottom, left, right等属性来调整布局。适用于宽度固定为375px的场景。

css3 position: fixed 居中问题

移动端，旁边留白的情况fixed不能居中的问题；
在这里插入图片描述

 z-index: 1000;
 position: fixed;
 margin:0 auto;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
    
 width: 375px;
 height: 100vh;

如果对您有所帮助，给个一键三连吧~~~Thanks♪(･ω･)ﾉ (✪ω✪) ᕦ(･ㅂ･)ᕤ！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hittcc

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS-1-样式优先级 position 居中 display 弹性布局盒模型省略号坍塌

sharryling

03-26

863

参考链接：https://blog.youkuaiyun.com/sinat_36521655/article/details/80140221 不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，...

ios网页样式问题：position: fixed； top: 0；在深色模式下顶部出现一条白线

qq_34221812的博客

02-28

521

如图：加上：transform: translate3d(0,-1px,0);

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

position: fixed定位带来的白色横线

qq_41956361的博客

07-12

1465

1.使用fixed可以帮我们快速的相对屏幕固定位置，但是页给我们带来的很多问他，比如滚动，层级，还有手机设备可能会出现一条横线。

附两个自己认为比较重要的链接地址（移动端的position:fixed,flexbox实现垂直居中布局）

SYYling的专栏

08-08

1601

http://bradfrost.com/blog/mobile/fixed-position/移动端实现position:fixed有哪些问题 http://zh.learnlayout.com/flexbox.html

设置定位后position:fixed后,发现原先的盒子不居中了怎么办

Wei0217的博客

05-07

604

定位后，盒子不再处于文档流中，不再受到文档流的影响，因此原本使用传统居中方式（如 margin: 0 auto;）来实现居中的方法可能不再适用。这种方法会将盒子的左边缘移动到父容器的水平中心点，实现水平居中的效果。这种方法会将盒子的顶部移动到父容器的垂直中心点，实现垂直居中的效果。

前端之 position的fixed和sticky的区别，含页面小测试

x_i_a_o_b_a_i的博客

02-18

5573

position的fixed和sticky的区别 fixed相对于相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。不管视口如何滚动，它的位置始终不变。 fixed如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。 <!DOCTYPE html> <html> ...

html中div通过position: fixed 浮动且设置了最大高度后, 里面的内容会超出div的玩味

07-08

我们正在解决一个CSS布局问题：使用position: fixed的div在设置max-height后，内容溢出时如何正确处理。根据用户描述，问题场景是：一个固定定位的div（position: fixed）设置了最大高度（max-height），当内容...

/* top: calc(50% - 315px); */ left: calc(100% -300px); width: 600px; height: 100%; z-index: 1000; position: fixed;想要元素靠右怎么改

03-21

好的，我现在需要帮助用户解决如何让一个使用固定定位的元素靠右对齐的问题。用户提供的CSS代码中有一些错误，比如`left: calc(100% -300px);`缺少空格，而且他们可能希望元素紧贴右侧，而不是留出空间。首先，我...

css3实现背景图片拉伸效果像桌面壁纸一样

09-25

总的来说，`background-size`属性是CSS3中的一个实用工具，它提供了灵活的方式来控制背景图片的显示方式，包括实现背景图片拉伸覆盖整个元素区域的效果，这样设计者就能创造出更具吸引力的页面布局和视觉效果。

<view class="fixed-button safe-area-inset-bottom" @click="submit()"> <view class="flex align-center justify-center" style="background-color: #13D28D; height: 88rpx; border-radius: 16rpx;"> <view class="text-bold text-lg" style="color: #fff;"> 发布 </view> </view> </view> .fixed-button { position: fixed; padding-left: 44rpx; padding-right: 44rpx; padding-top: 50rpx; bottom: 80rpx; left: 0; right: 0; z-index: 1000; } 我想要一个在页面最下方固定的按钮

最新发布

11-25

margin-top:负值，padding-top:值--解决顶部一条白线的兼容性问题

liudan123012的博客

07-30

952

自定义顶部导航中遇到一个兼容性问题，顶部总是有一条不明白线，大多数手机都不会出现，但是有部分手机可能会出现。我采用margin-top: -1px;padding-top: 1px;的方式来解决，发现好像可以实现。 //wxml <view class="navBar"> <view style="height: {{statusBarHeight}}px;></view> <view> <text style="line

关于Position:fixed固定定位后遇到问题解决方法

A_9888的博客

05-23

7668

关于Position:fixed固定定位后遇到的问题: 首先要理解 fixed 固定定位以后会使其脱离文档流，脱离文档流以后就会漂浮在页面上不会占据空间，导致以后的元素内容会上移，会被脱离文档流的元素遮挡。解决方法一般一个网页header部分会遇到这种问题。 1.这里可以给header部分设置高，然后给header一下的元素给margin-top，可以实现两个分开。另外注意position:fixed，一定要设置top：0； left：0:；不然会引起margin-top无效。 ...

在使用position：fixed属性时，如何才能让div居中显示

dayumxhaitang的博客

10-18

1642

作为前端开发人员，很多时候我们会需要让一个div使用position:fixed属性，这个时候有一个棘手的问题是如何在这个时候让div居中显示。我的做法是：给top、right、bottom、left四个值一个0像素，再给margin-top、margin-right、margin-bottom、margin-left四个值auto属性，来让浏览器帮我们计算像素比例，从而达到剧中的目的！！！注...

用flex布局的问题

qq_37899792的博客

07-26

461

1、如果红色、、蓝色、绿色三个元素的宽度不一致，如何保证中间的蓝色元素一直居中。如下图所示：解决：中间的元素使用绝对定位 2、上图中的红色元素如果没有了，如何保证蓝色的元素居中。如下图所示：解决：给左边一个空元素占位，可设置opacity:0 3、如何实现中间的元素靠左或靠右解决：① 不改变代码结构靠左的话，给中间的元素加margin-right:auto 靠右的话，给中间的元素加margin-left:aut...

css fixed定位弹出框居中的2种方法

erduoduo520的专栏

08-01

2582

fixed定位上下左右居中对齐

html 固定定位怎么居中,position fixed居中

weixin_30842027的博客

06-09

8145

position:fixed div如何居中据闻是以left right top bottom来定位的，那么剧中是怎么做的上下左右居div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}一个position：fixed属性的div中的另一个div居中失效我想实现导航栏跟随...

关于position:fixed;的居中问题

a6617681的博客

07-21

1417

通常情况下，我们通过操作margin来控制元素居中，代码如下： 1 #name{ 2 maigin：0px auto; 3 } 但当我们把position设置为fixed时，例如： 1 #id{ 2 position:fixed; 3 margin:0px auto; 4 } 以上代码中的margin:0px auto;会出现失效...

postion:fixed和margin:0 auto的使用

abc15603014457的博客

07-17

546

很多同学将顶部菜单固定，使用postion:fixed，然后使用margin:0 auto进行居中，发现margin:0 auto并不起作用。通常，我们要让某元素居中，会这样做： #element{ margin:0 auto; } 　　如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下： #element{ po...

移动端使用fixed定位，导致ios底部内容显示空白

weixin_44586318的博客

03-16

2585

事情是这样的，在开发一个WabApp的时候使用到了购物车组件所以想通过fixed定位固定在浏览器底部，PC浏览器中调试用的iphone和Android都正常显示，如下图： Android手机真机同样正常显示，但是ios的真机测试的时候购物车组件就不能正常显示了，好像被东西挡住了，如下图。后来查阅资料后发现，原来是因为ios高度默认设置为100%，使用fixed定位悬浮元素是不算入高度的。...