【Web Trick 1】css解决页面居中

来源：互联网发布：小猪cms官网编辑：程序博客网时间：2024/04/29 23:41

说到页面居中，我想对于每个web开发者来说都不陌生，我们常用的方法会是用js来解决，

但是用js会有很多问题，比如：

1、一般是将居中代码放在页面加载的函数中，这就有问题了，如果页面从一个屏幕拉到另

一个屏幕，居中代码不会执行，居中失效

2、不同浏览器对于js的执行不尽相同，很可能你会遇到一些比较奇怪的问题，但是就是找

不到原因

那么我们该如何去做了，在做了一些demo后，觉得用css实现会比较好，三大主流浏览器都

测试过了，下面列出大概做法：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE

这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再

加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

代码样例如下

<html><head><style>body{TEXT-ALIGN: center;}#center{MARGIN-RIGHT: auto;MARGIN-LEFT: auto; height:400px;background:#ffffff;width:400px;}</style></head><body><div id="center"></div></body></html>

PS：需要居中的子元素需要用数值指定其宽度，不能用百分数