关于position:fixed;的居中问题

转自：https://www.cnblogs.com/zywaf/p/7217102.html?utm_source=itdadao&utm_medium=referral

通常情况下，我们通过操作margin来控制元素居中，代码如下：

#name{maigin：0px auto;
}

但当我们把position设置为fixed时，例如：

#id{position:fixed;margin:0px auto;
}

以上代码中的margin:0px auto;会出现失效问题，盒子并未居中。这是因为fixed会导致盒子脱离正常文档流。
解决方法非常简单，只要应用如下代码即可：

#name{position:fixed;margin:0px auto;right:0px;left:0px;
}

若希望上下也可以居中，可采用如下代码

#name{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;
}

万能居中法(未知大小呦)：

#name{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1000;
}

关于position:fixed;的居中问题相关推荐

php 上下位置居中,CSS_css中position:fixed实现div在窗口上下左右居中，上下左右居中代码如下复制 - phpStudy...
css中position:fixed实现div在窗口上下左右居中上下左右居中代码如下复制代码代码如下: div{ position:fixed; margin:auto; left:0; ri ...
css3 position: fixed 居中问题，移动端，旁边留白的情况fixed不能居中的问题；
css3 position: fixed 居中问题移动端,旁边留白的情况fixed不能居中的问题: z-index: 1000;position: fixed;margin:0 auto;top: ...
html 固定定位怎么居中,position fixed居中
position:fixed div如何居中据闻是以left right top bottom来定位的,那么剧中是怎么做的上下左右居div{position:fixed;margin:auto;le ...
css position fixed 居中,css中position:fixed实现div居中上下左右居中
上下左右居中代码如下 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height ...
使用属性position:fixed的时候如何才能让div居中
css: .aa { position: fixed; top: 200px; left: 0px; right: 0px; width: 200px; height: 200px; margin-l ...
ios fixed定位后内容不显示_记录CSS中 position:fixed 踩的坑
在 html 页面的css样式中,如果将 position 属性的值设置为 fixed,那就表示其元素的位置相当于显示设备的可视区域进行定位,而今天在调试此属性时,却发生了一件奇怪的事件. posit ...
打造IE6的position:fixed整理篇
打造IE6的position:fixed整理篇 fixed真的是一个非常好的属性. 特别是做弹层的时候.可惜的是"国内主流浏览器"IE6大大不支持. 一般的我们都会通过CSS中的表 ...
position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...
1、position:fixed 固定定位
一.定位 1.position:fixed 固定定位元素的位置相对于浏览器窗口是固定位置.即使窗口是滚动的它也不会移动: 特性特性:1.元素脱离正常文档流,不占位(也脱离文本流,全脱)2.始终相对 ...

关于position:fixed;的居中问题

关于position:fixed;的居中问题相关推荐

最新文章

热门文章