CSS布局基础--水平和垂直居中
2006-05-03  作者:amao  同分类文章
description:
主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
div+css布局中,居中问题是每个初学者都会碰到的问题:

水平居中

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

完整举例代码如下:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

垂直居中

若BOX的宽度和高度已知:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

解释:如果把屏幕中点设为坐标原点(0 0),X的正方向是屏幕的右边,Y的正方向屏幕的上边。那么在已知BOX宽度和高度的情况下,设BOX的属性为绝对定位,top:50% left:50%,这样的话,BOX的左上角就在坐标原点(0 0), 设margin-left:-320px(宽度的一半), 左上角的坐标(-320 0),再设margin-top:-240px(高度的一半),左上角的坐标现在是(-320 240),相对原点来说, BOX是完全居中了,四个顶点的值分比别是(320 240)Ⅰ, (-320 240)Ⅱ,(-320 -240)Ⅲ ,(320 -240)Ⅳ。



相关
全选功能javascript
预览待上传的本地图片
页面上所有的链接都在新窗口打开
让javascript跑得更快
选项卡效果
简单仿discuz上传附件定位。
用javascript让页面的外部连接都在新窗口打开
表单提交时自动复制内容到剪贴板
鼠标滑过超链接自动点击代码
自动选择最快镜像