绝对居中：即在客户端上任何分辨率下纵横方向均居中

紫色的正方形为绝对定位的div

position:absolute; 
top: 50%; 
left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100后，便可以让其移动到以红点为中心的位置。;

样例代码：

<html>

<head>

<title>绝对定位的DIV绝对居中显示</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css"><!--

	/*   body und schrift deffinitionen */

	body {

		background-color: #e1ddd9;

		font-size: 12px;

		font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;

		color:#564b47;

		padding:0px;

		margin:0px;

	}

	#inhalt {

		position:absolute;

		height:200px;

		width:400px;

		margin:-100px 0px 0px -200px;

		top: 50%;

		left: 50%;

		text-align: left;

		padding: 0px;

		background-color: #f5f5f5;

		border: 1px dotted #000000;

		overflow: auto;

	}

	p, h1 {

		margin: 0px;

		padding: 10px;

	}

	h1 {

		font-size: 11px;

		text-transform:uppercase;

		text-align: right;

		color: #564b47;

		background-color: #90897a;

	}

	a {

		color: #ff66cc;

		font-size: 11px;

		background-color:transparent;

		text-decoration: none;

	}

--></style>

</head>

<body>

<div id="inhalt">

	<p><b>centered</b><br /><br />

		This area should be horizontally and vertically centered.<br />

		This text stays left aligned<br />

		<b>ie mac doesn’t like this! </b><br />

	</p>

</div>

</body>

</html>

　　

绝对定位的DIV绝对居中显示的更多相关文章

  1. 绝对定位多个字居中显示的css

    在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定位并加一个宽度,内层div居中 .box ...

  2. 层居中绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器

    详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...

  3. 绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器。

    详细解说,直接看样式:#dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; d ...

  4. 让一个小的div在大的div中居中显示

    原文 实现原理是设置margin自动适应,然后设置定位的上下左右都为0. 就如四边均衡受力从而实现盒子的居中: 代码: .parent { width:800px; height:500px; bor ...

  5. Html中div块居中显示

    表面上这个问题很难,因为涉及到浏览器窗体大小,导致部分界面效果不一致.图中的方法适用于div块大小不变的界面. 如上所示,将其分为两块,margin-left和margin-top的值均分别为widt ...

  6. 两个div并列居中显示——当display:inline-block;时，两个div无法对齐即一高一矮

    解决办法: 给div添加样式vertical-align: top;

  7. 两个div并列居中显示——当display:inline;时，div的宽高不起作用即两个div重叠显示

    解决办法: 将display设置为:inline-block

  8. 左边图标右边文字，在div里居中

  9. CSS 如何让li横向居中显示

    先给一个简单的示例HTML代码 <body> <form id="form1" runat="server"> <div id=& ...

随机推荐

  1. 17.1.1.4 Obtaining the Replication Master Binary Log Coordinates 得到复制master binary log 位置:

    17.1.1.4 Obtaining the Replication Master Binary Log Coordinates 得到复制master binary log 位置: 你需要master ...

  2. 使用GDI+轻松创建缩略图

    Gdi+ 还是相当好用的. 1> Image保存图像,需要一个CLSID的参数,它可以这样获得: int   GetEncoderClsid(const   WCHAR*   format,   ...

  3. c#4.0新特性之协变与逆变

    1.C#3.0以前的协变与逆变 如果你是第一次听说这个两个词,别担心,他们其实很常见.C#4.0中的协变与逆变[1](Covariance and contravariance)有了进一步的完善,主要 ...

  4. Java序列化技术

    Java序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java序列化与反序列化? Java序列化是指把Java对象转换为字节序列的过程:而Java反序列化是指把字节序列恢复为Java对象 ...

  5. 避免由于Windows Update自动安装安全补丁导致VM意外重启

     最近我们遇到一些客户报告他们的Windows VM被意外重启导致了其服务中断,我们查看了Event Log发现这个重启的操作时由于Windows update自动安装了安全补丁导致的重启操作.默 ...

  6. ASP.NET之JSONHelper操作

    转自:http://www.cnblogs.com/PEPE/archive/2012/02/13/Pepe_Yu.html 之前说到了Ext.Net中GridPanel行取值的问题(Ext.Net开 ...

  7. 搜索（另类状态BFS）：NOIP 华容道

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  8. HDU-2561 第二小整数

    http://acm.hdu.edu.cn/showproblem.php?pid=2561 第二小整数 Time Limit: 3000/1000 MS (Java/Others)    Memor ...

  9. selenium webdriver(5)---超时设置

    自动化测试中,等待时间的运用占据了举足轻重的地位,平常我们需要处理很多和时间息息相关的场景,例如: 打开新页面,只要特定元素出现而不用等待页面全部加载完成就对其进行操作 设置等待某元素出现的时间,超时 ...

  10. JavaScript---网络编程(8)-DHTML技术演示(1)

    DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程 ...