绝对定位元素设置水平居中
来源:互联网 发布:淘宝猝死 编辑:程序博客网 时间:2024/05/16 14:41
需求:有时页面内的一些容器需要定位在特定的某个位置,但是需要容器在水平方向上面居中显示,比如页面内的一个背景图里面放置一个容器,使用margin-top不方便,就决定使用绝对定位来设置。
实现方法:
方法一、知道容器尺寸的前提下
.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */}
缺点:该种方法需要提前知道容器的尺寸,否则margin负值无法进行精确调整,此时需要借助JS动态获取。
方法二、容器尺寸未知的前提下,使用CSS3的transform属性代替margin,transform中的translate偏移的百分比值是相对于自身大小的,设置示例如下:
.element { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */ -webkit-transform: translate(-50%, -50%);}
缺点:兼容性不好,IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。
方法三、margin: auto实现绝对定位元素的居中
.element { width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 有了这个就自动居中了 */}
阅读全文
0 0
- 绝对定位元素设置水平居中
- CSS:绝对定位元素实现水平居中
- 绝对定位元素的水平垂直居中
- 绝对定位水平居中
- 绝对定位的元素的水平居中的一个方法
- margin:auto实现绝对定位元素的水平垂直居中
- 实现绝对定位元素的水平垂直居中
- 让绝对定位的元素水平居中对齐
- margin:auto实现绝对定位元素的水平垂直居中
- css3 让绝对定位元素水平居中的方法
- 绝对定位元素居中
- 绝对定位水平垂直居中
- CSS水平居中,浮动水平居中,绝对定位水平居中
- 【CSS基础】绝对定位元素的水平居中 和 垂直居中
- css-定位元素水平居中
- position: absolute;绝对定位水平居中问题
- absolute 绝对定位水平居中问题
- position: absolute;绝对定位水平居中问题
- 码云Pages技术简历/个性主页模板有奖征集,千元奖品等你来撩!
- 如何轻松搞定远程视频监控?没有公网IP、无需端口映射
- Yii2.0 数据库操作增删改查详解
- Java 泛型详解
- 做正确的事,等着被开除
- 绝对定位元素设置水平居中
- CentOS 笔记
- MyBatis 最常见错误,启动时控制台无限输出日志
- Linux的Crontab定时执行PHP脚本的方法
- IntelliJ IDEA 编译报错:Error:java: Compilation failed: internal java compiler error
- eslint 严格配置
- Yarn_ResourceManager剖析
- 古典密码算法的设计与实现(C++实现)
- git重命名远程分支