css3绝对定位垂直居中,CSS3绝对定位自适应居中 - 米扑博客
网页前端开发中,经常会遇到让一个块状元素水平或垂直居中的情况
你知道如何在自适应屏幕的情况下保持元素居中么?
元素居中这是前端开发中最常见的任务之一
对于行内元素,我们可以对父元素使用 text-align: center属性来轻松处理;
对于块状元素,想必用的最多的就是对其使用 margin:0 auto 这个属性了
但是这个居中方法在某些特定的情况下并不理想。
比如在处理一个全屏banner的时候,利用一张高清大图作为背景,在图片上方布置文字或者其他元素来实现高端大气的效果。
如上图所示,典型的企业官网首页banner
CSS3 绝对定位自适应居中
一般情况下我们不会将背景图的width设为100% 因为不同的屏幕尺寸会使其挤压变形,就算是高度自适应也会导致banner高度变化,内部元素位置混乱。所以很多图片背景都会直接将其width设为原图宽度,并将父元素增加 overflow: hidden防止溢出。
下面给出一个demo
CSS3绝对定位自适应居中 - 米扑博客
*{
margin: 0 ;
padding: 0;
border: 0;
}
.wrap{
width: 100%;
height: 900px;
position: relative;
overflow: hidden;
}
.banner {
width: 1920px;
height: 900px;
overflow: hidden;
}
.banner img{
width: 1920px;
}
.banner p{
position: absolute;
top: 30%;
width: 100%;
padding: 50px 0;
text-align: center;
font-size: 100px;
color: #fff;
font-family: 'Merienda-Regular';
text-shadow: 2px 2px 10px #000;
}
HELLO WORLD
预览demo可以看到,在浏览器宽度为1920px的时候,整个banner完美展现出来;但是当浏览器宽度小于1920px的时候,虽然文字依然居中,而背景图片却一直左对齐,导致本来颇具意境的眼镜、咖啡图像被遮盖,完全失去了banner的高端大气。
那该怎么改进呢?
此时就算是再给.banner元素加margin:0 auto;它也不会居中显示,因为它本身的宽度大于父元素.wrap的宽度了。
此时我们可以采用绝对定位来实现其自适应居中,首先给.banner赋予绝对定位属性,然后给它一个定位值left:50%;让它来到父容器的中间,然后再让它向左偏移自身宽度一半的距离margin-left:-960px;此时它是不是已经在水平方向自适应居中了?
.banner {
position: absolute;
top:0;
left: 50%;
margin-left: -960px;
}
此时你是不是已经恍然大悟了,哦,原来是这样子啊。这个时候无论浏览器的宽度怎么变化,整张背景图都会牢牢的居中,重要的内容表达不会被遮盖掉。如下所示,同样的浏览器尺寸,却不一样的Banner效果。
同理,让一个元素水平垂直自适应居中的代码如下
.xxx{
position:absoulte;
overflow:hidden;
left:50%;
margin-left:自身宽度一半;
top:50;
margin-top:自身高度一半;
}
绝对定位的元素left或top 设置为50%的时候,
其左侧或顶部就会处于父元素的水平或者垂直中间,
此时在用margin属性添加负值补偿自身宽度/高度一半的距离,就可实现元素的绝对居中。
这个方法非常实用,在前端开发中处理元素定位问题上简单高效,
常见的遮罩、弹窗都会使用它来实现在屏幕上的绝对居中。
参考推荐:
css3绝对定位垂直居中,CSS3绝对定位自适应居中 - 米扑博客相关推荐
- 米扑博客:总结分享 WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商...
在网上查资料闲逛,偶然间看到了张戈博客的评论框有点意思,于是就收走拿到了我的米扑博客. 本文为米扑博客原创:总结分享 WordPress显示评论者IP归属地.浏览器.终端设备.电信运营商 WordPr ...
- html语言hr的用法,htmlhr各种样式使用 - 米扑博客
网页设计时,会用到hr的各种样式,如果使用得当,将会给你的页面增色很多! hr 属性 属性解释: width:60%; hr的宽度,即上图红色宽度为上一级宽度的60% height:5px; ...
- 米扑博客:总结分享 WordPress显示评论者IP归属地、浏览器、终端设备、电信运营商... 1
2019独角兽企业重金招聘Python工程师标准>>> 在网上查资料闲逛,偶然间看到了张戈博客的评论框有点意思,于是就收走拿到了我的米扑博客. 本文为米扑博客原创:总结分享 Word ...
- alexa api php,PHP通过Alexa官方API获取网站Alexa排名 - 米扑博客
Alexa 接口 Alexa的XML API接口是:http://data.alexa.com/data?cli=10&url=YOUR_DOMAIN_URL 查询结果如下: 如果想获取更多的 ...
- ajax post的回调函数另一个方法,jQueryajax–post()方法 - 米扑博客
jQuery ajax - post() 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); 通过 AJAX POST 请求改变 div 元素 ...
- linux快速切换目录命令,Linux在命令行快速切换目录 - 米扑博客
今天在微博上看到一个用命令行快速切换目录的文章,比之前自己的解决方案好了非常多,必须记录下来分享下. 每天在命令行下,一大部分的工作都是一遍又一遍的输入 cd ~/some/very/deep/oft ...
- 十大实用linux脚本,5个超实用的Shell脚本 - 米扑博客
分享5个shell脚本实例,大家可以借鉴下里面的思路,看下有没另外一种实现方式. 1.定时清空文件内容,定时记录文件大小 #!/bin/bash ########################### ...
- linux将文件的第二列求和,awk实现第一列相乘,第二列求和,并相加 - 米扑博客...
AWK 取了三位创始人 Alfred Aho,Peter Weinberger, Brian Kernighan 的Family Name的首字符,学习AWK有一本相当经典的书<The AWK ...
- 联想服务器x86系统,联想接盘IBMX86服务器:未来成败在哪里? - 米扑博客
联想此次并购IBM X86服务器业务的成败最终起决定作用的,并非什么技术或者高端.低端,而是联想并购之后的市场重心如何定位. 仅在IBM欲出售自己X86服务器业务传闻两天之后,联想就宣布以23亿美元并 ...
最新文章
- 类执行方法的过程与运行时
- 用类模拟C风格的赋值+返回值
- 管理系统状态栏和导航栏(翻译)
- 计算机视觉编程——照相机模型
- 浅析Java.lang.ProcessBuilder类
- Swift5以及IOS15对于二维码的使用
- JdbcTemplate操作
- srve0255e尚未定义要怎么办_我的可转债中签了,该怎么办?
- js生成1~100个随机不重复数
- Python实现图形学DDA算法
- luarocks安装以及lfs安装
- 微信群接口(开发思路)
- 苹果更新失败无法连接服务器未响应,iPhone 更新失败怎么办?更新 iOS 常见的错误代码及解决方法(二)...
- 洛谷 2184 贪婪大陆
- 基于单片机的数控直流稳压电源设计
- 如何对极乐迪斯科(Disco Elysium for mac)进行安装
- 【华人学者风采】黄霞 清华大学
- 【Unity】关于U3d与bip骨骼适配
- 黄金思维圈,看透问题本质的利器,成功者必备工具
- 机器视觉引导定位系统,工业视觉定位检测