实现DIV居中布局三种途径(1)

阅读更多

DIV+CSS布局有很多值得学习的地方，这里和大家描述一下关于DIV居中布局的实现方法，主要有三种方法，每种方法都有各自的特点，请看下文详细介绍，相信通过本文描述你对DIV居中布局一定会有深刻的认识。

关于DIV居中布局的几种实现方法

现在DIV+CSS布局越来越流行了，怎么实现div居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助.

第一种方法:

body{ 
margin:0pxauto; 
text-align:center; 
}  [/java]
但是如果没申明下面这句解析方法,页面就会出错.不能居中对齐!

但是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.

第二种方法:

margin-left:50%;  
left:-width/2;  
 

这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽，那么你就应该设置left:-384px。

第三种方法:使用JS来控制div居中.

在页面之中添加了下面的一小段代码.

function.js内容:

if(window.screen.width>800)  
{document.write(" 

body{margin-left:"+(window.screen.width-800)/2+"px}");} 
经过测试.可以正常实现DIV居中

补充一点:上面这段JS必须放在你的最后一个CSS连接或的后面.

◆下面是这种方法的详细讲解:

首先解释一下JS中窗口和网页的几种尺寸属性的含义

document.body.clientWidth（网页可见区域宽）：是指浏览器显示网页的区域宽度，不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。

document.body.clientHeight（网页可见区域高）：是指浏览器显示网页的区域所能看到的高度，不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。

document.body.scrollTop（网页被卷去的高）：是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。

document.body.scrollLeft（网页被卷去的左）：是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。