CSS实现定位元素居中的方法


Posted in HTML / CSS onJune 23, 2015

绝对定位元素的居中实现

如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。

兼容性不错的主流用法是:

CSS Code复制内容到剪贴板
  1. .element {   
  2.     width600pxheight400px;   
  3.     positionabsoluteleft: 50%; top: 50%;   
  4.     margin-top: -200px;    /* 高度的一半 */  
  5.     margin-left: -300px;    /* 宽度的一半 */  
  6. }  

但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

CSS3的兴起,使得有了更好的解决方法,就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的,于是,我们可以:

CSS Code复制内容到剪贴板
  1. .element {   
  2.     width600pxheight400px;   
  3.     positionabsoluteleft: 50%; top: 50%;   
  4.     transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */  
  5. }  

于是乎,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。

然,问题很明显,兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。

实际上,绝对定位元素的居中实现还有另外一种方法,可以说是权衡了上面的尺寸自适应以及兼容性的一个方案,其实现的核心是margin:auto.

margin:auto实现绝对定位元素的居中

首先,我们来看下CSS代码:

CSS Code复制内容到剪贴板
  1. .element {   
  2.     width600pxheight400px;   
  3.     positionabsoluteleft: 0; top: 0; rightright: 0; bottombottom: 0;   
  4.     marginauto;    /* 有了这个就自动居中了 */  
  5. }  

代码两个关键点:

    上下左右均0位置定位;
    margin: auto

于是,就居中了。上面代码的width: 600px height: 400px仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。很有意思的~~

您可以狠狠地点击这里:margin:auto与绝对定位元素的垂直居中demo

HTML / CSS 相关文章推荐
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 #HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 #HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 #HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 #HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 #HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 #HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 #HTML / CSS
You might like
PHP新手上路(二)
2006/10/09 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
JavaScript 指导方针
2007/04/05 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
Python的函数嵌套的使用方法
2014/01/24 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python编写一个优美的下载器
2018/04/15 Python
Python中extend和append的区别讲解
2019/01/24 Python
Python for循环与range函数的使用详解
2019/03/23 Python
python自带tkinter库实现棋盘覆盖图形界面
2019/07/17 Python
python实现滑雪者小游戏
2020/02/22 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
教育科研先进个人材料
2014/01/26 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
2014年电工工作总结
2014/11/20 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
安全生产学习心得体会
2016/01/18 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server