CSS Div完美居中方法

CSS中有很多(水平/垂直)居中的方法今天刚好看到一个新的方法,嘿嘿,自我感觉一下非常好用.而且以前我也没见过.所以今天就记一下.下次备用

HTML

 代码如下 复制代码

<DIV class="demo center">
<DIV></DIV></DIV>CSS

.center{
/* 需要宽度支持但自适应 */
 position:relative;
}

.center>*{
/* ie8+,ie7-请使用js或者其它方法 */

position:absolute; margin:auto; overflow:auto; top:0; left:0; bottom:0; right:0;}
.demo{ width:200px; height:200px; background-color:#55DF00;}
.demo>div{ width:500px; height:500px; background-color:#2A5F00;}

结果如图所示

当然人无完人,这个方法也是有他的局限性的,就是IE7-不支持此方法.

由于使用了绝对定位,子元素会居于父元素的左上角.这点需要切记,

但是我还是很喜欢这种方法,跟其它的居中方法有很多的区别,对于子元素里面的元素样式干扰很少.用起来还是挺棒的.

时间： 2024-08-03 10:36:54

CSS Div完美居中方法的相关文章

css+div实现居中实例教程

Demo of middled vertical align Author: Spenser Lee, Liberty Studio Originally posted on BlueIdea Forum Table of centents: Single line countainer with/without a fixed height Align multi-line container which does not have a fixed height Simulating tabl

css div 横向居中写法

本文章就单独讲一下关于css教程 div 横向居中写法的用法,并且在ie,ie7,firefox兼容问题. 横向居中(centering) 这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:css如何横向居中?您需要定义元素的宽,并且定义横向的margin,假如您的布局包含在一个层(容器)中,您可以这样定义使它横向居中: #wrap { width:760px; /* 修改为您的层的宽度 */ margin:0 auto; } 但是ie5/win不能正确显示这个定义,我们

CSS文字图片div元素居中方法之水平居中

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法

绝对定位的div的居中方法，下面的写法兼容IE系列浏览器和火狐浏览器。

详细解说,直接看样式: #dingwei{padding:10px;background-color:#003300;color:#FFFFFF;  width:600px;height:300px;  display:block;   position: absolute;  top:50%;  left:50%;  margin-left:-300px;  margin-top:-150px;} padding:10px;background-color:#003300;color:#FFF

鼠标经过背景变色之CSS+DIV方法

  实现鼠标经过背景变色的方法有很多,今天我们介绍的是用CSS+DIV实现的方法. 方法一 #div:hover{background:#000000;} 解释:鼠标经过id为div的元素时背景变色 IE6.0.Firefox2.0.Opera 9.23都不行 方法二 <div onmouseover="this.style.backgroundColor='#F4F9FD'" onmouseout="this.style.backgroundColor='#FFFFF

CSS+DIV实现鼠标经过背景变色

实现鼠标经过背景变色的方法有很多,今天我们介绍的是用CSS+DIV实现的方法. 方法一 #div:hover{background:#000000;}     解释:鼠标经过id为div的元素时背景变色     IE6.0.Firefox2.0.Opera 9.23都不行     方法二 <style> .d_over{background-color:#307172;} .d_out{background-color:#EFEFEF;}   哈哈哈哈哈     的标签是可以,可是,这样子会导

js+CSS实现弹出居中背景半透明div层的方法

 这篇文章主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

js+CSS实现弹出居中背景半透明div层的方法_javascript技巧

本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

css实现图片在div中居中的效果

利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中. 结构代码同上: css代码如下: div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;} img {display:block; margin:0 auto;} 备注: img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然