如何让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>
分享到：
相关推荐
本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`<div>`元素。`<div>`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`<div>`...
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
标题提到的“div居中div居中的8种方法”是网页开发中的基础技巧，适用于不同场景。以下将详细解释这8种方法，并提供相关的应用示例。 1. **CSS Flexbox居中** CSS3的Flexbox模型提供了非常方便的居中方式。在父...
DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中
通过上述介绍，我们了解到实现DIV居中的方法有很多种，包括使用`text-align: center;`、`margin-right: auto;`和`margin-left: auto;`等CSS属性，以及使用Flexbox或Grid布局。选择哪种方法取决于具体的应用场景和...
div框水平垂直居中跟内容垂直居中
在讨论JSP页面中图片居中的问题时，首先需要掌握一些基础的CSS布局知识，包括display属性的使用、垂直居中的方法、margin属性的自动居中技巧...在调试时，可逐一排查这些常见问题，确保图片能够在div中正确居中显示。
提供了div在div中居中的多种方式，直接打开文件F12查看样式即可，简单方便。不再只会使用绝对布局
以上就是关于“jQuery弹出div层窗口、div屏幕居中、背景滤镜效果和div拖拽效果”的核心知识点。通过熟练掌握这些技巧，开发者可以创建更富有互动性和用户体验的网页应用。在实际开发中，还需要根据不同的项目需求，...
div垂直居中屏幕的方法，兼容IE6 7 8 Firefox
### DIV垂直居中的N种方法：详尽解析与实践 在网页设计中，DIV元素的垂直居中一直是前端开发者关注的焦点。无论是响应式布局的需求，还是美观度的提升，垂直居中的实现都能显著增强用户体验。本文将深入探讨并演示...
在网页设计中，让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一...
在网页设计中，让元素居中是一个常见的需求，特别是对于`div`这样的块级元素。在本示例中，我们探讨的是如何实现`div`的绝对居中，无论是水平还是垂直方向，即使`div`的高度是不确定的。下面将详细解释这个`DIV绝对...
实现让多个DIV排列时居中 css div 并列居中
例如，一个包含文本的 `div` 元素，可以通过以下 CSS 代码将其内部文本居中： ```css .txtCenter { text-align: center; } ``` 接下来，我们讨论块状元素的居中。对于定宽的块状元素，可以使用 `margin` 属性的...
`属性可以轻松地将文本内容在div内居中对齐。例如： ```css .container { text-align: center; } ``` 2. **多行文本水平居中**： 对于多行文本，`display: flex;`和`justify-content: center;`组合可以实现...
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
在网页设计中，元素的居中布局是一种常见的需求，尤其对于创建美观和用户体验良好的网站至关重要。本文主要探讨了如何通过CSS实现不同类型的元素的水平居中。 首先，对于行内元素（如文本或图像），我们可以使用`...
在网页设计中，将图片在div中垂直和水平居中是一项常见的需求，这涉及到CSS布局技术的运用。本文将深入探讨如何使用最简单的方法来实现这个目标，同时也会涉及JavaScript（JS）的一些特效，尽管在描述中没有明确指出...