CSS布局基础--水平和垂直居中

CSS布局基础--水平和垂直居中

2006-05-03 作者:amao 同分类文章

description:

主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center {
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}

div+css布局中，居中问题是每个初学者都会碰到的问题：

水平居中

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>demo</title> <style type="text/css"> body{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0;/*--for opera--*/ text-align: center;/*--for IE5.0--*/ } #layout{ margin: 0 auto;/*--居中 --*/ width: 760px;/*--宽度必须的--*/ text-align: left; background: #F6F6F6; } pre{ padding: 15px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <div id="layout"><pre> body{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0;/*--for opera--*/ text-align: center;/*--for IE5.0--*/ } #layout{ margin: 0 auto;/*--居中 --*/ width: 760px;/*--宽度必须的--*/ text-align: left; background: #F6F6F6; } pre{ padding: 15px; } </pre> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

完整举例代码如下：

运行代码框
<html> <head> <style> body{TEXT-ALIGN: center;} #center{ MARGIN-RIGHT: auto; MARGIN-LEFT: auto; height:200px; background:#F00; width:400px; } </style> </head> <body> <div id="center"></div> </body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

垂直居中

若BOX的宽度和高度已知：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <style type="text/css"> body{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0;/*--for opera--*/ } #layout{ position: absolute;/*--绝对定位--*/ top: 50%; left: 50%; margin-top: -240px;/*--div高度的一半--*/ margin-left: -320px;/*--div宽度的一半--*/ width: 640px; height: 480px; background: #ECECEC; } pre{ padding: 15px; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body> <div id="layout"><pre> body{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0; padding: 0;/*--for opera--*/ } #layout{ position: absolute;/*--绝对定位--*/ top: 50%; left: 50%; margin-top: -240px;/*--div高度的一半--*/ margin-left: -320px;/*--div宽度的一半--*/ width: 640px; height: 480px; background: #ECECEC; } pre{ padding: 15px; } </pre></div> </body> </html>
[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）Ⅳ。

fiblog

About

分类

最新

存档