css中让div水平居中实现代码

原理很简单：将left和top设置为50%来定位div到浏览器中央，再将margin-left和margin-top值设置为宽和高的一半

，使div居中显示。

加上这个东西：

代码如下

复制代码

1 text-align:center;

2 margin-left:auto;

3 margin-right:auto;

或：

1 text-align:center;

2 margin:0 auto;

这两个在Chrome、FireFox、IE7、8、9下都测试通过，注意，IE下的文档格式不能为“Quirks”。

例1

代码如下	复制代码
<style> #warp { position: absolute; width:500px; height:200px; left:50%; top:50%; margin-left:-250px; margin-top:-100px; border: solid 3px red; } </style> <body> <div id=warp>Test</div> </body>