绝对定位的DIV绝对居中显示

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

紫色的正方形为绝对定位的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" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> <! -- /* 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="/" mce_href="">more nice and free css templates</a> </p> </div> </body> </html>

绝对定位的DIV绝对居中显示相关推荐

【CSS】一个div在另外一个div中居中显示（水平居中，竖直居中）
一个div在另外一个div中居中显示(水平居中,竖直居中) 方法1: 通过设置子元素绝对定位和margin:auto .parent {position:relative;width:800px;he ...
多个div并排居中显示
需要多个div并排居中显示,这里我将两个方法 1. 使用flex HTML <div class="div0"><div class="div1&quo ...
绝对定位多个字居中显示的css
在工作中遇到一种情况,例如把一个div元素绝对定位到一个位置,但是该元素中的文字个数不确定,还要保证始终该文字是居中显示,则可以定义两个div,外层div绝对定位并加一个宽度,内层div居中 .box ...
html div浏览器居中显示,IE浏览器DIV居中实现方法
IE浏览器中div使用margin:0 auto好像不能居中了,但在ff其它浏览器没问题,下面我来介绍解决ie下 div不居中问题的办法. 编写主题或模板是居中是个大问题,还有就是div中元素都浮动, ...
css 两个div一行居中显示,CSS：多个DIV在同一行居中显示的一种实现方法
在项目开发中,画面经常有多个DIV的内容显示在一行的要求. 比如HTML 你好,这是div1的第一行. 你好,这是div1的第二行你好,这是div2的第一行. 你好,这是div3的第一行. 你好,这 ...
html上下左右居中显示,Html div上下左右居中显示
实现di页求是解这如前总回随4泉标使幻近面的是,v上下,左右居中显示,,,当是固定高度时候,很好办,,这里展示的是宽度是整个屏幕时朋不功事做时次功好来多这开制的请一例农在个屏器随的会满和满时波实的于设 ...
html div自动居中显示,div居中与div内容居中
div css结构时,常见到div 居中与div形式居中,即div本身水准居中与div内的形式居中机关. 而形式居中又分为垂直居中与水准居中,这里CSS5将逐个让人人驾御这几个居中机关手段. 关于di ...
html div自动居中显示,DIV居中_div水平居中_DIV布局居中
若何让DIV居中呢?若何让DIV盒子水准居中呢?本节CSS5让大家实现DIV结构程度居中. 一.div居中完成引见在结构一张网页时,一般网页主体框架是居中于浏览器中的.实现最外层DIV水准居中与涉猎 ...
绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器。
详细解说,直接看样式: #dingwei{padding:10px;background-color:#003300;color:#FFFFFF; width:600px;height:300px; ...

绝对定位的DIV绝对居中显示

绝对定位的DIV绝对居中显示相关推荐

最新文章

热门文章