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

紫色的正方形为绝对定位的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. struts一点心得

    action中: 设置属性并增加get,set方法,给属性赋值后 (如: private String name; public String getName() { return name; } p ...

  2. Python urllib2写爬虫时候每次request open以后一定要关闭

    最近用python urllib2写一个爬虫工具,碰到运行一会程序后就会出现scoket connection peer reset错误.经过多次试验发现原来是在每次request open以后没有及 ...

  3. POJ_3045_Cow_Acrobats_(贪心)

    描述 http://poj.org/problem?id=3045 n头牛,每头牛都有重量w[i]和力量s[i].把这n头牛落起来,每头牛会有一个危险值,危险值是它上面所有牛的重量和减去它的力量.求危 ...

  4. （转载）CSS分别设置Input样式（按input类型）

    (转载)http://www.uml.org.cn/html/201207202.asp   当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框? ...

  5. MySqlCommand, MySqlParameter and "LIKE" with Percent Symbol

    //Wrong way MySqlCommand cmd = oldDb.GetSqlStringCommand(CommandType.Text,"SELECT * _ FROM user ...

  6. 英语之路 zt

    各位为英语而郁闷的兄弟姐妹们: 自从考完GRE和TOEFL以后,心有所感,本想写点心得,但是因为太懒没写成.今日风雨如晦,心中又有所感,于是一舒笔墨,写下我学英语的方法.俺知道有很多兄弟姐妹们和曾经的 ...

  7. HDU-1518 Square(DFS)

    Square Time Limit : 10000/5000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submi ...

  8. 关于MySQL的分区(partion)

    1 CREATE TABLE part_tab ( c1 int default NULL, c2 ) default NULL, c3 date default NULL ) engine=myis ...

  9. oracle删除当前用户下所有表

    1.如果有删除用户的权限,则可以: drop user user_name cascade; 加了cascade就可以把用户连带的数据全部删掉. 删除后再创建该用户.--创建管理员用户create u ...

  10. 为什么 UDP 有时比 TCP 更有优势

    随着网络技术飞速发展,网速已不再是传输的瓶颈,UDP协议以其简单.传输快的优势,在越来越多场景下取代了TCP,如网页浏览.流媒体.实时游戏.物联网. 1.网速的提升给UDP稳定性提供可靠网络保障 CD ...