<style>
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:#333;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;left: 0}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; margin: 0 auto;}
#content{width:500px; height:400px; border:1px solid red; background:#EEE; margin: 0 auto;}
</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>
分享到：
- 2007-12-12 19:14
- 浏览 3364
- 评论(0)
- 论坛回复 / 浏览 (0 / 8693)
- 查看更多
相关推荐
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
在网页设计中，让多行文字在`div`元素中垂直居中是一项常见的需求，尤其在构建响应式布局和用户界面时。实现这个效果的方法多种多样，每种方法都有其适用场景和优缺点。以下是一些主要的策略来实现`div`中多行文字的...
在网页设计中，让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
在网页设计中，DIV元素的垂直居中一直是前端开发者关注的焦点。无论是响应式布局的需求，还是美观度的提升，垂直居中的实现都能显著增强用户体验。本文将深入探讨并演示多种实现DIV垂直居中的方法，包括但不限于使用...
在网页设计领域，`DIV+CSS`是一种常见的布局方式，它通过HTML的`<div>`元素结合CSS（层叠样式表）来实现页面结构和样式的分离，提高了代码的可维护性和网页的加载效率。本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV...
通过上述方法，结合适当的CSS和HTML代码，即使在JSP页面中也能有效地使图片在div中水平和垂直居中显示。在实际应用时，还需注意图片的尺寸要适当配合div容器的尺寸，以达到最佳的视觉效果。 最后，还需提一下，如果...
在网页设计中，让图片水平垂直居中是一个常见的需求，特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标，适用于各种现代浏览器。 首先，我们可以...
这种简单有效的方法在多数现代浏览器中表现良好，但在IE6及以下版本中，此方法不支持图片的垂直居中。因此，在设计跨浏览器兼容的页面时，需额外注意。 ### 多行未知高度文字的垂直居中 当文本内容高度不定时，...
在网页设计中，"垂直居中显示"是一个常见的需求，特别是在多设备、多屏幕尺寸的环境下，确保元素在页面上无论何时都能保持居中状态，能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...
标题中的“DIV未知高度的垂直居中代码”指的是在网页设计中如何使一个具有未知高度的<div>元素在页面上实现垂直居中的技术。在Web开发中，这是一项常见的需求，尤其是在响应式设计中，当内容高度不确定时，仍然希望...
在网页设计与开发过程中，经常需要将页面中的元素（如DIV）居中显示，以达到更好的视觉效果和用户体验。本文将详细介绍如何实现DIV的水平居中以及垂直居中，并提供具体的代码示例。 #### 二、水平居中 ##### 2.1 ...
本课程"div垂直居中-CSS元素垂直居中方法的探究"深入探讨了如何在HTML中使用CSS实现元素的垂直居中。下面将详细介绍两种主要的解决方案：文本垂直居中和块级元素垂直居中。 首先，我们来讨论文本垂直居中。在HTML中...
在网页设计中，让多行文字在容器内垂直居中是一项常见的需求，尤其在响应式设计和各种屏幕尺寸下保持良好的用户体验更为重要。本话题主要探讨如何使用div和CSS技术来实现多行文本的垂直居中，并且使高度能够自适应...
在本文中，我们将探讨如何通过不同的方法在网页布局中实现div元素的垂直居中。 首先，我们注意到CSS的`vertical-align`属性并不适用于所有元素。它主要应用于表格元素，如`<td>`、`<th>`和`<caption>`，而不是`<div...
在前端开发中，经常需要将元素在页面中进行水平垂直居中处理，特别是在响应式布局或者需要精确控制元素位置的情况下尤为重要。本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直居中，并且无需指定具体的宽度和...
在网页设计中，将文字垂直居中放置于DIV层内是一个常见的需求。对于单行文字和多行文字的垂直居中处理，有不同的方法和技术。本文将详细解释如何实现这两种情况下的文字垂直居中。 首先，对于单行文字而言，实现...
在网页设计中，让图片或其他元素在页面上垂直居中是一项常见的需求。"div+css图片垂直居中"是这个话题的核心，它涉及到CSS布局和浏览器兼容性问题，特别是对于Internet Explorer（IE）和其他现代浏览器的处理差异。...
在HTML页面中，经常会遇到需要在div元素中垂直居中显示img（图片）和span（内联文本容器）的问题。通常，我们希望通过简单的CSS样式实现这一布局需求。而要解决这个问题，我们需要了解CSS中的vertical-align属性和...
标题 "div垂直居中" 描述的是一个常见的前端布局问题，如何在网页设计中让一个div元素在容器中垂直居中对齐。这个问题涉及到CSS（层叠样式表）的布局技术，尤其是定位和 Flexbox 或 Grid 等现代布局模式。 在传统的...