聊聊css水平垂直居中那些事

标签：

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

聊聊css水平垂直居中那些事

标签：

原文地址：http://my.oschina.net/oschinaindex/blog/515058