DIV居中问题

最新推荐文章于 2023-07-12 20:22:21 发布

ice_forest

最新推荐文章于 2023-07-12 20:22:21 发布

阅读量128

点赞数

分类专栏： HTML & W3C & DOM 文章标签： Opera CSS IE ASP HTML

本文链接：https://blog.csdn.net/ice_forest/article/details/83485390

版权

HTML & W3C & DOM 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

如何让DIV元素永远居中显示
2007年8月25日 1:38:13
From: http://www.sodi.com.cn/rmjs/ShowArticle.asp?ArticleID=706
做个变换菜单的DIV居中问题搞了我几个小时,在网上搜到的都不是很理想,终于测试出来一个方法来,这个方法绝对有效,当你真的拿DIV没办法的时候可以试试.

<style type="text/css"> 
#center { 
position:absolute; 
width:300px; 
height:60px; 
left:50%; 
top:50%; 
z-index:1; 
background-color:#000; 
color:fff; 
margin-left:-150px; 
margin-top:-32px 
}        
</style> 
</head> 
<body> 
<div id="center">绝对在中间</div> 
</body>

============以下是网上其他的一些方法,供参考==============

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

1.水平居中
举例代码如下:

<!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>

2.另外，经典论坛阿捷的例子：

主要的样式定义如下：

body {TEXT-ALIGN: center;}  
#center {  
MARGIN-RIGHT: auto;  
MARGIN-LEFT: auto;  
}

说明：
首先在父级元素定义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:200px; 
background:#F00; 
width:400px; 
} 
</style> 
</head> 
<body> 
<div id="center"></div> 
</body></html>

3.垂直居中

若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>

解释：如果把屏幕中点设为坐标原点（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） Ⅳ。

适用于首页带语言选择版本或者欢迎页。

单行文字可采用行高来实现垂直居中，或者用padding来调整。

4.另一个方法:

<div style="border: 1 solid red; position: absolute;top:expression((this.parentElement.offsetHeight- this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth- this.offsetWidth)/2);">我站在中央了<br>center</div> 
</div> 

<div style="border: 1 solid #C0C0C0;"><br><br><br><br><br><br><br><br> 
<div style="border: 1 solid red; position: absolute;top:expression((this.parentElement.offsetHeight- this.offsetHeight)/2);left:expression((this.parentElement.offsetWidth- this.offsetWidth)/2);">我站在中央了<br>center</div>