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

紫色的正方形为绝对定位的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. google python/c++ code style naming

    python: Guidelines derived from Guido's Recommendations Type Public Internal Packages lower_with_und ...

  2. statspack系列4

    原文:http://jonathanlewis.wordpress.com/2006/12/27/analysing-statspack-4/ 作者:Jonathan Lewis 使用statspac ...

  3. bzoj1487

    还是仙人掌,和1023一样的考虑方法比1023简单但比1040难环形dp的处理方法和1040一样 type node=record po,next:longint; end; ..,..] of lo ...

  4. bzoj1264

    表面上看这是一道LCS问题 LCS问题O(n2)的复杂度已经很优秀了 而这道题需要O(nlogn)以下的复杂度才能AC 所以我们要找经典问题的特殊性 特殊就在这两个串中,每个数字都是恰好出现5次 不难 ...

  5. Google protobuf的安装及使用

    最近应为工作的需要,合作的部门提供了protobuf的接口,总结了一下使用的过程和方法如下: 下载protobuf-2.3.0: http://protobuf.googlecode.com/file ...

  6. Centos系统创建用户oracle后，用该用户登陆系统，页面加载报错GConf error

    Linux 的 GConf error 解决办法 问题: Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错,导致重新进入Centos系统后出现: GConf error:Fail ...

  7. SQL 判断字段中指定字符出现的次数

    原文地址:SQL 判断字段中指定字符出现的次数 原理:将指定字符转换为空,原长度减去转换后的长度就是指定字符的次数. 在做数据处理时遇到一个SQL操作的问题就是有一列关键词字段,字段中包含各种乱七八糟 ...

  8. 查看SQL语句执行时间

    DBCC FREEPROCCACHE;SET STATISTICS PROFILE ON SET STATISTICS IO ON SET STATISTICS TIME ON go--SQL开始** ...

  9. ShadowGun Deadzone 放出 GM Kit Mod 包

    一向在技术上比较开放的 MadFinger 继上次给出 shadowgun 的关卡包之后,这次更加大方的给出了更加完整的关卡的代码,甚至包括服务器:ShadowGun Deadzone GM Kit. ...

  10. Oracle translate 函数

    项目里要求对军人身份证特殊处理,只要数字位.本想用正则表达式,但是oracle9i不支持正则. 后来发现translate 可以实现功能. translate(string,from_str,to_s ...