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

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