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实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
CSS3的 fit-content实现水平居中
Sep 07 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
浅谈HTML5 & CSS3的新交互特性
Jul 19 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 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生成缩略图的代码
2011/01/12 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
PHP基础教程(php入门基础教程)一些code代码
2013/01/06 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
JS 常用校验函数
2009/03/26 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
分享Python文本生成二维码实例
2016/01/06 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python字符串的一些操作方法总结
2019/06/10 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
土木工程专业个人求职信
2013/12/05 职场文书
火锅店营销方案
2014/02/26 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
大队委员竞选稿
2015/11/20 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA