关于使用CSS居中(包括水平/垂直)

来源: BlogBus 原始链接: http://forest.blogbus.com:80/logs/2005/11/1641921.html 存档链接: https://web.archive.org/web/20060101071544id_/http://forest.blogbus.com:80/logs/2005/11/1641921.html

深山老林 生活随笔 << CSS 锦囊 | 首 页 | js窗口移动的方法 >> 2005-11-28 关于使用CSS居中(包括水平/垂直) TAG： CSS 代码分享 原创 今天有网友问到用CSS的text-align: center属性在FF中不起作用的问题，找了一下网上的资料，总结了一下： 水平居中的问题可以用以下方法解决： 先看一下body的CSS样式：

body{ margin:0;padding:0;text-align:center;}

这里的body把margin与padding设置为0，这样就把body内容与浏览器边缘亲密接触。然后text-align:center 把body的内容全部居中。 在需要水平居中的DIV层添加以下属性：

margin-left: auto; margin-right: auto;

也可写成：

margin:0 auto;

这样在FF中就可以居中了，在IE中别忘了在开头加上DTD哦，不然可是不起作用的：

如何使图片在DIV 中垂直居中 用背景的方法。举例：

body{BACKGROUND: #FFF url( http://www.blogbus.com/images/site/blogbus_logo.gif ) no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30" 如何使文本在DIV中垂直居中 果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：