让绝对定位的DIV绝对居中显示的方法

飘逸的风10年前 (2015-12-27)前端7177

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

         

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

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

样例代码:

<html> 
<head> 
<title>Nice and Free CSS Template 11</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<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 /> 
<a href="/">more nice and free css templates</a> 
</p> 
<p> 
</div> 
</body> 
</html>

相关文章

jQuery插件 图片放大镜-Cloud Zoom

jQuery插件 图片放大镜-Cloud Zoom

图片放大镜效果是一种不错的效果,多应用于电子商务、图片展示等网站,给用户带来更好的体验。实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 jQuery 的一个插件。和其他产品相...

jQuery自适应宽度导航插件Horizo​​ntalNav

jQuery自适应宽度导航插件Horizo​​ntalNav

Horizo​​ntalNav 是一个 jQuery 导航插件,能够自适应容器的宽度。如果你曾经在一个项目中创建过这种效果,你就会知道,这是很难处理的。但这个插件很容易,并且支持 IE6、IE7。...

jQuery操作Select的方法集合

jQuery获取Select选择的Text和Value:  语法解释:  1. $("#select_id").change(function(){/...

html+css 中 em和px 的尺寸解释

px像素(Pixel),相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默...

jw player的快捷调用方法(附:jw player参数设定)

最近开发的项目需要调用一部分视频,找了很久,感觉有两个非常不错,一个是ckplayer(非常炫酷,网址:https://www.ckplayer.com/),感觉好奇的同学,可以访问他们的官网去看看;...

jQuery动态改变图片显示大小(完美兼容全部)

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。