当前位置:Gxlcms > html代码 > 聊聊css水平垂直居中那些事_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:12人阅读

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;}

人气教程排行