<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#divcss{width:834px; height:550px; border:1px solid #9f9f9f; <strong>position:absolute;left:50%;margin-left:-417px;top:50%;margin-top:-275px;</strong>}
-->
</style>
</head>
<body>
<div id="divcss">自动适应水平和垂直居中</div>
</body>
</html>
原理:先用left:50%;top:50%让这个div的左上角居于页面的正中,然后用margin-left:-417px;margin-top:-275px;使div向左向上移动它自身宽高的一半.
分享到：
相关推荐
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中
div框水平垂直居中跟内容垂直居中
本文将深入探讨并演示多种实现DIV垂直居中的方法，包括但不限于使用CSS的`height`, `line-height`, `padding`, `display`属性，以及如何通过`vertical-align`属性配合特定的HTML结构来达到目标。 #### 方法一：...
div垂直居中屏幕的方法，兼容IE6 7 8 Firefox
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
使用CSS样式也可以实现水平垂直居中，方法是定义一个CSS类，然后将其应用于DIV元素。例如： <!--#center {position:absolute;width:300px;height:60px;left:50%;top:50%;z-index:1;background-color:#000;color:...
在网页设计中，让一个`div`元素在页面上实现水平和垂直居中是一项常见的需求。这个主题，"DIV水平垂直居中"，通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中，描述提到使用了jQuery来实现，这是一...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
例如，垂直居中和水平居中可以分别使用Grid和Flexbox来实现。 在提供的`demo.html`文件中，可能包含了这些居中布局的示例代码。`logo.png`可能是用来测试这些布局效果的图片。通过查看和分析这些文件，可以进一步...
以上就是使用CSS（特别是Flexbox和Grid布局）以及JavaScript实现图片在div中垂直/水平居中的方法。这些技巧不仅适用于图片，还可以应用于其他类型的元素，提高了网页布局的灵活性和可维护性。在实际项目中，应根据...
垂直居中一直是前端开发中经常遇到的一个布局需求。提到CSS实现垂直居中，很多人第一时间会想到`vertical-align`属性。然而，此属性只适用于具有`inline`或`table-cell`显示类型的元素，例如`<td>`、`<th>`、`<img>`...
在网页设计中，"垂直居中显示"是一个常见的需求，特别是在多设备、多屏幕尺寸的环境下，确保元素在页面上无论何时都能保持居中状态，能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...
CSS Grid布局提供了一个二维网格系统，同样支持子元素的垂直居中。设置`display: grid`给父元素，并使用`align-items: center`使其在垂直方向上居中。 ```css .parent { display: grid; align-items: center;...
任意图片在div里的垂直居中！
总结来说，这个示例展示了两种CSS方法来实现`div`元素的垂直居中： 1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position:...
在网页设计中，让图片水平垂直居中是一个常见的需求，特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标，适用于各种现代浏览器。 首先，我们可以...
通用所有浏览器， 欢迎大家分享。 绝对是真的
这个样式将div视为一个表格单元格，通过vertical-align:middle属性实现垂直居中，再结合text-align:center实现水平居中。需要注意的是，在JSP中处理图片居中时，可能需要额外声明遵循W3C的文档类型定义（DTD），以...