展会信息港展会大全

CSS Div完美居中方法 android软件开发教程
来源:互联网   发布日期:2016-03-25 16:27:32   浏览:2073次  

导读:CSS Div完美居中方法其实就是div垂直居中了,我们只要上下左右都设置50%就可以了,那你这就错了,下面我们来看看。CSS中有很多(水平/垂直)居中的方法今天刚好看到一个新的方法,嘿嘿,...

CSS Div完美居中方法其实就是div垂直居中了,我们只要上下左右都设置50%就可以了,那你这就错了,下面我们来看看。

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-不支持此方法.

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

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

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
推荐内容
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港