欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-09 23:45:01
...
1、水平居中实现方法
我是一个水平居中的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
/*方法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;}