首页 > web前端 > html教程 > 聊聊css水平垂直居中那些事_html/css_WEB-ITnose

聊聊css水平垂直居中那些事_html/css_WEB-ITnose

WBOY
发布: 2016-06-21 09:05:42
原创
1450 人浏览过

1、水平居中实现方法

<div class="demo">    我是一个水平居中的div</div>
登录后复制
/*方法1*/.demo{width: 960px;margin: 0 auto;}		/*方法2*/.demo{width: 960px;height: 400px;background: #f00;position: relative;left: 50%;margin-left: -480px;}
登录后复制

2、水平垂直居中实现方法

<div class="demo">    我是一个水平垂直居中的div</div>
登录后复制
/*方法1:无兼容性问题*/.demo{width: 400px;height: 400px;background: #f00;position: absolute;top: 50%;left: 50%;margin: -200px 0 0 -200px;}
登录后复制
/*方法2: 在ie7浏览器下不支持*/.demo{width: 400px;height: 400px;background: #f00;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
登录后复制






来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板