DIV的水平、垂直居中的最佳实现
2008-04-22 11:44
453 查看
最近开始尝试Web标准，不可避免的就遇到了DIV的居中问题。
在网上搜了一通，有用DIV嵌套的，有用脚本的，不过都不理想。
最后发现网友Charlee这个方法效果不错：
</style>
<body>
<div id=warp>Test</div>
</body>
这里要注意的是，margin-left、margin-top的值必须分别设为width和height值的一半。
页面效果如下图所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</style>
<body>
<div id=warp>Test</div>
</body>
第一行指定DocType的语句必不可少，否则有些新的CSS特性不会生效。
我在自己测试的时候忘记了加这一句，结果导致Div如何也不水平居中——后来才醒悟到是这个在作怪，加上后马上就正常了。
还有，width的值是必须给出的，而height可以不用，因为只是要求水平方向居中。
如果不嫌麻烦的话，margin那一句也可用这个来代替：
margin-left:auto;
margin-right:auto;
以上CSS经过本人测试，完全可用。
在网上搜了一通，有用DIV嵌套的，有用脚本的，不过都不理想。
最后发现网友Charlee这个方法效果不错：
</style>
<body>
<div id=warp>Test</div>
</body>
这里要注意的是，margin-left、margin-top的值必须分别设为width和height值的一半。
页面效果如下图所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</style>
<body>
<div id=warp>Test</div>
</body>
第一行指定DocType的语句必不可少，否则有些新的CSS特性不会生效。
我在自己测试的时候忘记了加这一句，结果导致Div如何也不水平居中——后来才醒悟到是这个在作怪，加上后马上就正常了。
还有，width的值是必须给出的，而height可以不用，因为只是要求水平方向居中。
如果不嫌麻烦的话，margin那一句也可用这个来代替：
margin-left:auto;
margin-right:auto;
以上CSS经过本人测试，完全可用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 让Div实现水平或垂直居中的相关方法
- CSS实现图片水平垂直居中于DIV
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
- css实现div的水平和垂直居中
- 实现div里的img图片水平垂直居中
- 基于jQuery实现的水平和垂直居中的div窗口
- CSS:实现某个div在网页中垂直水平居中
- 总结div里面水平垂直居中的实现方法
- 基于jQuery实现的水平和垂直居中的div窗口
- 寥寥几行CSS:实现某个div在网页中垂直水平居中呢
- css实现div内图片的垂直、水平居中
- css实现图片在div中水平和垂直居中(但图片宽高要小于div宽高)
- CSS实现DIV水平 垂直居中-1
- css实现div的水平垂直居中方法
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
- css实现在div中垂直水平居中
- 纯css实现div中单行文字，多行文字，嵌套div垂直水平居中问题
- CSS实现DIV水平居中和上下垂直居中
- 纯css实现DIV以及图片水平垂直居中兼容多种浏览器（实现过程）
- css实现div水平、垂直居中兼容chrome、ie8