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

紫色的正方形为绝对定位的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. insert into select 堵塞update

    mysql[192.168.5.15] blocking_thread[2286333] blocking_query[insert into temp_zhuyou_mktact_1(hotel_g ...

  2. 一种Android换肤机制的实现

    http://eastmoneyandroid.github.io/2016/01/22/android-reskin/

  3. 【CF】174 Div.1 B Cow Program

    思路是树形DP+状态压缩.其实仅有2个状态,奇数次来到x或者偶数次来到x.(因为对x的更新不同).同时开辟visit数组,解决环.注意,一旦遇到环结果就是-1.DP数组存放第奇数/偶数次来到x时,对y ...

  4. 【转】ios中@class和 #import 的使用时机

    代码中会发现有部分#import操作写在m文件中,而h文件仅仅使用@class进行声明,为什么不直接把#import放到h文件中呢? 这是因为h文件在修改后,所有import该h文件的所有文件必须重 ...

  5. Makefile第二讲：打印出内容和使用变量

    摘要 `@echo "开始生成最终执行文件,请稍候..."`这一句便是将一条信息输出到终端,为何前边有个`@`符号呢?有了这个符号该命令本身就不会输出到终端(不理解,自己去掉或者加 ...

  6. Method Overloading in WCF zt

    Method overloading is the process of implementing Polymorphism in Object-Oriented Programming. A met ...

  7. 树中是否存在路径和为 sum leecode java

    https://oj.leetcode.com/problems/path-sum/ /** * Definition for binary tree * public class TreeNode ...

  8. 洛谷1373 小a和uim之大逃离

    洛谷1373 小a和uim之大逃离 本题地址:http://www.luogu.org/problem/show?pid=1373 题目背景 小a和uim来到雨林中探险.突然一阵北风吹来,一片乌云从北 ...

  9. lost connection to mysql server at "reading initial communication packet",system error:2

  10. Maven浅析-3 Ant Vs Maven

    1.什么是Ant? Ant起源是为了取代构建工具Make.它可以跨系统,建立在Java和XML的基础上,而且非常程式化. Ant更像一个脚本工具,我们必须在Ant内显示地声明做任何事情.在<ta ...