position为fixed的元素的居中问题

最新推荐文章于 2022-03-23 18:03:03 发布
最新推荐文章于 2022-03-23 18:03:03 发布
阅读量1.7k 收藏
点赞数
分类专栏： web前端 文章标签： fixed 居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shidaping/article/details/52639671
版权

对于position:fixed的元素，我们可以使用left,top配合margin-left,margin-top实现。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title></title>
</head>
<body>
  <div class="mydiv">
  </div>
  <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }
  .mydiv{
    position:fixed;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -100px;
    background-color: red;
  }
  </style>
</body>
</html>
这里mydiv的宽高都是固定的，所以我们可以用这种方式实现。但是如果它的宽高不固定，我们就得用transform中的translate实现了。代码如下： 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title></title>
</head>
<body>
  <div class="mydiv">
  </div>
  <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }
  .mydiv{
    position:fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: red;
  }
  </style>
</body>
</html>



shidaping
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 position fixed固定居中问题解决方案
09-25
总之，解决 `position: fixed` 元素居中问题的关键在于理解 `fixed` 定位的工作原理，以及如何通过调整 `left` 和 `right` 属性来适应不同浏览器的兼容性需求。在实际项目中，还需要考虑使用现代前端工具和最佳实践...
使用position:fixed属性让DIV居中
09-25
下面与大家分享下使用position:fixed属性让DIV居中的关键代码是position:fixed;left:0px;right:0px;width:706px;margin-left:auto;margin-right:auto，感兴趣的朋友可以参考下哈
关于position:fixed;的居中问题
a6617681的博客
07-21 1326
通常情况下，我们通过操作margin来控制元素居中，代码如下： 1 #name{ 2 maigin：0px auto; 3 } 但当我们把position设置为fixed时，例如： 1 #id{ 2 position:fixed; 3 margin:0px auto; 4 } 以上代码中的margin:0px auto;会出现失效...
position:fixed 固定并居中
weixin_43833851的博客
08-29 5719
不是前端，做前端的活真是寸步难行，一个居中就搞了好久 <html> <head> <meta charset="utf-8"> <title></title> <style> .pos_fixed { position:fixed; margin:auto; left:0; right:0; bottom:10...
让元素水平垂直居中的四种方法
AK的博客
08-14 3342
一、使用flex弹性布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>flex</title> </head> <style> *{ margin: 0; padding: 0; } #father{ display: flex; j
position定位属性 以及 元素居中方式
m0_51328823的博客
01-07 2633
定位属性position 在css中比较重要的便是position和float。 定位是将盒子定在某一个位置自由的漂浮在其他盒子的上面 定位的语法 定位=定位模式+边偏移(left right top bottom) 定位的属性值 1.静态定位 position: static; 相当于没有定位 设置边偏移无效 2.相对定位 position: relative; 1.相对于 自己原来在标准流中位置来移动的 2.不脱标(继续占有原来的位置，后面的盒子仍然以标准流的方式对待它) 3.绝对定
position：fixed，如何水平垂直居中
Owen的博客
02-11 9128
情况1、宽度确定（高度同理） width:8rem; height:8rem; position:fixed; left:0; right:0; margin:0 auto; 情况2、宽度不确定 position:fixed; 3 left:50%; 4 top:50%; 5 transform:translate(-5...
css中position:fixed实现div居中上下左右居中
09-25
实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看
css中position:fixed实现div在窗口上下左右居中
09-25
实现div居中的方法有很多，本例介绍的使用css中position:fixed来实现div的上下左右居中，下面以一个DIV 元素在浏览器窗口居中为例
css 固定位置居中,css3 position:fixed 固定居中的问题
weixin_28797889的博客
08-04 2473
固定定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动元素固定一般使用position:fixed，fixed表示脱离了正常的文档流，但若是此元素居中，方法如下：1.如果想使某元素居中：$ele{ margin:0 auto}margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应 marin:语法结构(1)margin:10px; 四边统一外边距(2)...
position: fixed 居中
leoly612200的博客
04-24 231
例如：<div class="content"></div> .content{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:100; }
Vue3 teleport 搭配 css fixed 的妙用
cainiao1412的博客
03-23 731
最近写了一个登录弹出框，背景需要配上黑色布罩，黑色布罩使用position: fixed，基于浏览器整个窗口定位，加上黑色背景，代码大致如下： .curtain-container { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.39); z-index: 1; } 登录框使用position: absolute，被配上了
在使用position：fixed属性时，如何才能让div居中显示
dayumxhaitang的博客
10-18 1545
作为前端开发人员，很多时候我们会需要让一个div使用position:fixed属性，这个时候有一个棘手的问题是如何在这个时候让div居中显示。我的做法是：给top、right、bottom、left四个值一个0像素，再给margin-top、margin-right、margin-bottom、margin-left四个值auto属性，来让浏览器帮我们计算像素比例，从而达到剧中的目的！！！ 注...
css position: fixed; 垂直居中,绝对定位居中
热门推荐
10-23 1万+
.boxout{ background:#fff; z-index: 111;===display:none; box-shadow: 0 1px 4px #AAA; position: fixed; _position:absolute; /* hack for IE6 */ top: 50%; left: 50%; margin: -201px 0 0 -480px; /* 注意,...
附两个自己认为比较重要的链接地址（移动端的position:fixed,flexbox实现垂直居中布局）
SYYling的专栏
08-08 1525
http://bradfrost.com/blog/mobile/fixed-position/移动端实现position:fixed有哪些问题 http://zh.learnlayout.com/flexbox.html
css中position:fixed实现div居中
mailangel123的专栏
10-13 385
上下左右 居中  代码如下 复制代码  div{     position:fixed;     margin:auto;     left:0;     right:0;     top:0;     bottom:0;     width:200px;     height:150px; }   如果只需要左右居中，那么把 bottom:0; 或者 t
html fixed 居中,CSS中position属性之fixed实现div居中
weixin_42314711的博客
07-02 305
position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。上下左右 居中div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;width:200px;height:150px;...
[css] position:fixed居中问题
程序员老狼专注开发aigc或客服系统应用
05-13 112
测试发现 ， 如果设置了left 或right ， 如果想要居中那么 left:0px; right:0px; margin:0 auto; 如果没有设置过 ， 只有bottom或top 那么它就是跟着父元素来的 ， 如果父元素居中 ， 它也居中 ...
关于使用position:fixed之后附加margin/padding的一些影响细节
FuChenRenShen的博客
01-02 5677
① 未设置（left/right/top/bottom属性）方位   -&gt;    该元素表现为包裹性（与内联元素的效果相似，目前来说margin和padding与内联元素中的margin/padding的表现是一样的）               1.能由包裹的span撑开               2.未设置方位时，margin无效，padding却是有效的,且其百分比是按照bo...
position: fixed;居中
最新发布
05-16
要将一个使用 position...注意：以上方法中第一种方法在元素高度和宽度不确定时会有问题，第二种方法不适用于 IE8 及以下版本的浏览器。推荐使用第三种方法，因为它适用于大多数情况，并且不需要知道元素的高度和宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值