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

紫色的正方形为绝对定位的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. jap中文转码

    因为js url在传值的过程中使用的是js自己默认的字符集编码规则,我们必须把它转成属于我们自己的编码规格,JSP页面 url=encodeURI(encodeURI(url)); //用了2次enc ...

  2. 9.png(9位图)在android中作为background使用导致居中属性不起作用的解决方法

    在使用到9.png的布局上面添加 android:padding="0dip" 比如 <LinearLayout            android:layout_widt ...

  3. SIFT算法：特征描述子

    SIFT算法:DoG尺度空间生产  SIFT算法:KeyPoint找寻.定位与优化 SIFT算法:确定特征点方向  SIFT算法:特征描述子 目录: 1.确定描述子采样区域 2.生成描述子 2.1 旋 ...

  4. [pod install] error: cannot open .git/FETCH_HEAD: Permission denied

    pod installAnalyzing dependencies[!] Pod::Executable pull error: cannot open .git/FETCH_HEAD: Permis ...

  5. 【转】iOS开发者账号和证书

    原文网址:http://www.jianshu.com/p/8e967c1d95c2 从Xcode7之后,苹果支持了免证书调试,但是若是需要调试推送功能,或者需要发布App,则需要使用付费的开发者账户 ...

  6. 数学之美 zt

    数学是美丽的,哪里有数哪里就有美. 数学的定义是研究数量关系和空间形式的一门科学.但有句名言说:数学比科学大得多,因为它是科学的语言.数学不仅用来写科学,而且可用来写人生.所以说数学是一切学科的基础, ...

  7. ubuntu相关软件合集(持续更新中)

    本人使用的是Ubuntu-Kylin14.04,自带了日历.输入法.优客助手等易于上手的应用.省的每次安装完原生的系统再麻烦的安装,下面介绍默认应用外的相关常用软件: 一.Keylock Applic ...

  8. lfs遇到的一些问题--准备阶段

    本机宿主系统archlinux,lfs SVN-20130711,参考文档 1.在离开或重新进入当前工作环境 (比如 su 成为 root 或者其他用户) 时不要忘记检查 $LFS 是否设置好. ec ...

  9. n维立体空间建模

    n维立体空间建模,基于网格技术,将整个地球信息整体封装,初始进行网格化,选取某一个网格,进行迭代,    迭代的子项依然是网格,迭代的次数为k,网格最终大小可以指定,这种指定决定了立体块的细化率,假设 ...

  10. Closure Compiler(封闭编辑器), Closure Inspector, Closure Templates, 封闭图书馆(Closure Library) Google- 摘自网络

    谷歌日前宣布,将自己开发者使用的一系列工具对外开放.这些工具曾用来开发谷歌的主要产品,包括Gmail.谷歌文档(Google Docs)和谷歌地图(Google Maps). 第一个工具叫做Closu ...