前段时间有写过这个话题，今天在来补充一下，以下是支持IE6,IE7和Firefox垂直居中代码。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div层在html页面中垂直居中</title>
</head>
<style>
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
background:#000;
display:table;
}
#outer[id] {
display: table;
position: static;
*position:relative;
_position: static;
}
#middle {
position: absolute;
top: 50%;
left: 0;
vertical-align:middle;
display:table-cell;
width:100%;
*vertical-align:middle;
*display:table-cell;
*width:100%;
_vertical-align:;
_display:;
_width:;
}
#middle[id] {
display: table-cell;
vertical-align: middle;
position: static;
top:50%;
left:0;
width:100%;
*position:absolute;
_position: ;
}
#inner {
position: relative;
top: -50%;
margin: 0 auto;
text-align:center;
}
#content{
width:500px;
height:400px;
border:1px solid red;
background:#EEE;
margin: 0 auto;
text-align:left;
}
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
<div id="content">div层在html页面中垂直居中div层在html页面中垂直居中div层在html页面中垂直居中div层在 html页面中垂直居中div层在html页面中垂直居中</div>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
DIV+CSS 水平垂直居中网页学习 DIV+CSS 水平垂直居中是Web开发中一个常见的问题，如何将DIV元素水平垂直居中是一个非常重要的知识点。本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:...
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
`<div>`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`<div>`的样式，我们可以控制其在页面上的位置和外观。 在CSS中，居中布局通常涉及以下几种方法： 1...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
Div是HTML中的一个容器元素，用于组织页面结构，而CSS（Cascading Style Sheets）则负责控制这些Div元素的样式和布局。 在Div+CSS布局中，我们首先需要理解Div的基本用法。Div元素通常通过`<div>`标签来创建，可以...
此外，文档还提到了div+css在不同浏览器间的兼容性问题，例如div的垂直居中、margin加倍、IE浏览器特有的显示问题等，并给出了相应的解决策略。这提醒开发者在设计时需考虑跨浏览器兼容性，确保网站在各种环境下都能...
#### CSS垂直居中原理 在CSS中，`vertical-align`属性主要用于设置行内元素或表格单元格中的内容垂直对齐方式。但是，当涉及到块级元素时，这个属性并不起作用。因此，我们需要采用其他技术来达到垂直居中的目的。...
在网页设计中，`div+css`是一种常见的布局方式，但它也伴随着一系列的浏览器兼容性问题。这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异，尤其是老版本的Internet Explorer（如IE6和IE7）与其他...
在网页设计中，让图片或其他元素在页面上垂直居中是一项常见的需求。"div+css图片垂直居中"是这个话题的核心，它涉及到CSS布局和浏览器兼容性问题，特别是对于Internet Explorer（IE）和其他现代浏览器的处理差异。...
div+css文本水平垂直居中，兼容ie、谷歌等浏览器
div框水平垂直居中跟内容垂直居中
在网页设计领域，"div+css居中"是一种常见的布局技术，用于使元素在网页上水平或垂直居中对齐。这种技术利用HTML中的`<div>`元素作为容器，结合CSS（Cascading Style Sheets）样式来实现内容的定位。在本教程中，...
`可以实现子元素在父容器中的水平垂直居中。 六、响应式布局 随着移动设备的普及，`div+css`布局也应考虑响应式设计。可以使用媒体查询（`@media`）来根据不同屏幕尺寸调整布局，使页面在不同设备上都能良好展示。 ...
在网页设计中，`DIV+CSS`是一种常见的布局方式，它可以帮助我们构建出灵活、响应式的页面结构。本文主要探讨如何使用CSS使布局在页面中居中。 首先，要实现整个布局的居中，我们需要设置页面的最外层容器，通常是`...
在网页设计中，"div+css布局"是一种常见的页面构建方式，它利用HTML中的<div>元素结合CSS（层叠样式表）来控制网页元素的结构和样式。在本主题中，我们将深入探讨如何通过CSS实现图片的最大宽度限制、水平垂直居中，...
使用绝对定位可以实现层在浏览器中的垂直居中，代码如下： ```css div { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; width: 200px; height: 200px; border: 1px solid red; }...
7. 垂直居中的实现：使用绝对定位结合`top:50%`和负外边距可以实现层在浏览器中的垂直居中。负外边距的值等于层自身高度的一半。 8. Firefox中嵌套div的居中问题：在Firefox中，若要使嵌套的div在父div中水平居中，...
对于多行文本或块级元素的垂直居中，有更多复杂的技术，如使用`display:table-cell`，`Flexbox`或者`Grid`布局等，这些技术在现代浏览器中更加灵活且易于实现。 总的来说，Div+CSS布局居中涉及多种CSS技巧和策略，...
在HTML中，<div>元素是一个通用的容器，用于组合其他HTML元素，不带有任何默认样式。通过CSS，我们可以为<div>添加样式，如宽度、高度、边距、背景色等，使其具有特定的视觉效果。CSS还允许我们控制元素的布局，如...