关于fixed的在页面居中问题。

html部分

<div class="ceshi">测试</div>
.ceshi{
width:200px;height:100px;background:#dd5522;position:fixed;left:0px;top:0px;right:0px;bottom:0px;margin:auto;
}

说明:当元素定义为 fixed时。需要它在网页中绝对居中,可以先将left,top,right,bottom,都设置为0

然后使用margin:auto来居中。不兼容ie6浏览器。

时间: 2024-12-29 10:12:32

关于fixed的在页面居中问题。的相关文章

移动端fixed的元素抖动的问题

工作中发现,给一个元素添加fixed属性,让它固定在窗口某个位置,直接加fposition:fixed属性就能实现这个效果: 在安卓手机上的效果都比较好,但是ios系统的个别浏览器兼容性就不好,如QQ浏览器.UC浏览器.360浏览器(这几个是ios最容易出问题的浏览器): 问题:当用户快速滑动页面的到时候,fixed的元素就会在窗口跳动或者抖动,非常影响用户体验 下面提供几个解决方案,仅供参考,如有更好更有效的解决办法,欢迎留言交流探讨! 方法一: 给body设置高度100% body,html

C#使用Fixed创建固定大小的缓冲区

在 C# 中,可以使用 fixed 语句在数据结构中创建带有固定大小数组的缓冲区. 使用现有代码(如使用其他语言.预先存在的 DLL 或 COM 项目编写的代码)时,这种方法非常有用. 固定数组可采用允许普通结构成员使用的任何特性或修饰符. 唯一的限制是,数组类型必须是 bool.byte. char. short.int.long.sbyte.ushort.uint.ulong.float 或 double. private fixed char name[30]; 在早期版本的 C# 中,声

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

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

布局模型 之 层模型(position的relative、absolute与fixed区别?)

css的布局模型分为流动模型(Flow).浮动模型(Float).层模型(Layer). 浮动模型(Float)和层模型(Layer)有什么显著区别?     浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动:浮动的元素仍然会占据文档流的物理空间.关于浮动模型的详细说明请看另一篇文章的介绍.http://ycgit.blog.51cto.com/8590215/1958452 层模型(Layer):设置为层模型的元

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

关于float、absolute,fixed谁的z-index大!

假如浮动也有z-index的话,三者的z-index关系是怎样的呢? 在不手动设置z-index的情况下:fixed>absolute>float,也就是固定定位压住绝对定位,绝对定位会压住浮动元素. 如果把绝对定位的z-index设置为1就能反压住固定定位的元素了(前提是固定定位的元素没设置z-index) relative就不说了,它都没脱离文档流肯定会被前三者覆盖的

Bootstrap Table Fixed Columns

最近在使用BootStrap 做项目前端,自然也用到了  Bootstrap Table. 推荐大家多去这个http://bootstrap-table.wenzhixin.net.cn/zh-cn/  网站看看,上面有很详细的介绍以及其他扩展功能 下面写下 Fixed Columns(固定列)的使用方法.附件下载地址:http://pan.baidu.com/s/1kUEQTPt 1.引用css文件,js文件(注意引用顺序) <link rel="stylesheet" hre

虚拟键盘冲击移动端fixed布局的解决方案

在做移动端业务开发时,会碰到fixed元素和输入框同时存在的情况.在手机软键盘唤起的情况下,会造成原本fixed定位的元素跟随软键盘而上浮,对整体布局造成冲击.来看这样一个栗子直观的感受一下这个bug. 问题描述: 开发一个创业板转签页面,预期效果图是这样的. 红色矩形区域为使用fixed布局的内容,其css代码为{width:100%;position:fixed;bottom:0;left:0},这看起来并没有什么问题,但在手机软键盘唤起进行输入的时候,红色矩形区域跟随软键盘而浮动起来,这时

z-index的理解 z-index 属性仅在节点的 position 属性为 relative, absolute 或者 fixed 时生效.

今天做游戏的Exercise模式的时候,发现把所有的div设置为position:absolute;后,点击play进入到游戏界面的时候,鼠标点击数字的时候,完全没反应.经过我的反复检查,发现只要给所有的div在深度上排个顺序就可以了.但是,有点投机取巧的感觉,所以想透彻的了解z-index这个属性. CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识.它就类似与photoshop里面图层