关于position:fixed;的居中问题

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

1 #name{
2     maigin:0px auto;
3 }

但当我们把position设置为fixed时,例如:

1 #id{
2     position:fixed;
3     margin:0px auto;
4 }

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

1 #name{
2     position:fixed;
3     margin:0px auto;
4     right:0px;
5     left:0px;
6 }

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

1 #name{
2     position:fixed;
3     margin:auto;
4     left:0;
5     right:0;
6     top:0;
7     bottom:0;
8 }
时间: 2024-11-15 03:13:41

关于position:fixed;的居中问题的相关文章

css中position:fixed实现div居中

上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px;} 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中,那么把 left:0; 或者 right:0; 即可 下面附一个DIV 元素在浏览器窗口居中 其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞

css3 position fixed居中的问题

通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 如果还想让此元素位置固定呢?一般我们会添加position:fixed,如下: #element{ position:fixed; margin:0 auto; } 但是这样做的结果就是,元素不居中了.这说明fixed使对象脱离了正常文档流. 解决方案: #element{ position:fixed; margin:0 auto; left:0; right:0; } 但是在IE7以下的版本中无法工作

position:fixed div如何居中

div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;} 原文地址:https://www.cnblogs.com/hedianzhan/p/8459901.html

解决IOS safari在input focus弹出输入法时不支持position fixed的问题

该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position:fixed的支持不是很好(在IOS5之前甚至还不支持position:fixed).我遇到的其中一个问题就是,在iOS6+环境下,input focus弹出输入法的时候,设置了position fixed的input框浮在页面上了,而不是吸附在软键盘上.效果如图(图片来源于网上): 而Androi

打造IE6的position:fixed整理篇

fixed真的是一个很好的属性.特别是做弹层的时候.可惜的是"国内主流浏览器"IE6大大不支持. 一般的我们都会通过CSS中的表达式来解决这个问题. ? 1 2 3 4 5 .fixed { position:absolute; left:expression(eval(document.documentElement.scrollLeft)); top:expression(eval(document.documentElement.scrollTop)) } 好吧,希望施主的钛合金

手机QQ内置浏览器position:fixed 属性支持不好的解决方案

在三星android 手机QQ内部打开连接时,有的手机QQ版本低时,会对position:fixed 支持不好. 表现在position:fixed 后 再用margin:0 atuo; 居中时,页面不居中: 可以这样解决:在外层再套一个div层.将position:fixed 属性放在外层然后定宽: 里面的层width:100%,margin:0 auto; 就可以完美支持低版本手机QQ position:fixed 后margin:0 auto; 不居中的问题.

解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就

position:fixed之safari的坑

mobile开发如今已经越来越步入正规,很多问题也得到了各大浏览器厂商的支持和修正,比如今天要说的ipone下的fixed,如今Safari也的得到了支持,不过却还有些比较坑得地方. 今天要说得这个坑是关于safari全屏模式,当页面进入全屏模式(向下滚动以后页面默认会进入全屏模式)时页面底部就不可交互,看起来好像事件失效了一样,这个是时候窗口底部的任何工具栏,链接或者通过fixed底部固定的工具栏等等都没法点击了,这时点击只会触发Safari退出全屏得动作,然后调出Safari 工具栏,需要再

安卓自带浏览器 position:fixed时 图片模糊问题

最近遇到一个问题:给一个div做position:fixed时,div里的图片在小米1s自带浏览器里面图片显示模糊了,而其它浏览器图片都是清楚的(说明:已经是2倍的图片了).代码如下: <div class="position:fixed">     <img src="xxx"> </div> 只要将posiiton:fixed去除时,图片又是清晰的.经过一方排插和google,确定该问题是andorid自带浏览器bug,在po