纯CSS实现上下左右都居中的代码

#box{width:600px; height:400px; border:1px solid red;}
#box{position:static; *position:relative; display:table; *display:block; }
#box-middle{position:static; *position:absolute; display:table-cell; *display:block; *top:50%; vertical-align:middle; *vertical-align:auto;}
#box-inner{position:relative; top:-50%; background-color:blue; margin:0 auto; width:200px; height:100px;}

content

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

终于见识了这个变态的IE7，象雾象雨又象风，IE系列的CSS hack: * html它认；Firefox的CSS hack: html>body、#id[id]、html[xmlns] div这样的东东它也认，教我说它什么好呢！
最终通过无敌 * 解决了它！

赞 (0)

相关推荐

  • 纯CSS实现上下左右都居中的代码

    #box{width:600px; height:400px; border:1px solid red;} #box{position:static; *position:relative; display:table; *display:block; } #box-middle{position:static; *position:absolute; display:table-cell; *display:block; *top:50%; vertical-align:middle; *v

  • 纯CSS生成抗锯齿圆角的代码

    抗锯齿圆角 .antialias-roundedcorners{width:650px;height:76px;padding:5px;background-color:#3847B4;} .spiffy{display:block} .spiffy *{ display:block; height:1px; overflow:hidden; font-size:.01em; background:#F1FFDD} .spiffy1{ margin-left:3px; margin-right:

  • 代码实例之纯CSS代码实现翻页效果

    代码实例之纯CSS代码实现翻页效果

    纯CSS实现翻页效果,原理比较简单,书签配合隐藏. dl { position:absolute; width:240px; height:170px; border:10px solid #eee; } dd { margin:0; width:240px; height:170px; overflow:hidden; } img { border:1px solid black } dt { position:absolute; right:3px; top:50px; } a { disp

  • 讨论CSS中的各类居中方式

    讨论CSS中的各类居中方式

    今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 复制代码 代码如下: margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果. 那么其他的办法呢?容我一一道来: line-height 首先介绍文字的水平居中方法: 复制代码 代码如下: <div class="wrap">刘放</div> 利用line-height设为height的一样即可: 复制代码 代

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

    本文实例讲述了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实现窗户玻璃雨滴逼真效果

    纯css实现窗户玻璃雨滴逼真效果

    这里仅是用CSS技术来演示这样的一个场景,可能并不太实用.然而这是一个探索CSS新功能的最佳机会.可以让你尝试使用一些新特性和新工具.并且逐渐将在工作中实践.在制作窗口雨滴效果,将使用到HAML和Sass. 案例效果 查看演示 源码下载 看到上面的效果是不是有点像人站室内看窗外雨中的夜景,窗户上雨滴的效果是那么的真实,窗外的夜景却又是那么的模糊.咱们不在诗意化了,我想大家更为关注的是用什么样的技术来实现这样的一个效果. 预处理器 在这个示例中,使用了HAML和Sass来替代我们熟悉的HTML和C

  • 纯CSS实现标签导航制作

    在网上搜索了一下都没怎么看到纯用CSS制作标签导航方面的教程或者说明,大部分都是要涉及到JS的编写的.这对于很多CSS学习中的人来说实在有些不够体贴,既然没人做那我来先来试试!我在这里做的CSS标签导航是纯CSS无JS无背景图片的绿色导航.此文章适合初学者,高手可以路过,呵呵! nav02 *{ margin:0; padding:0; } .mainNav{ margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{ marg

  • 纯js+html和纯css+html制作手风琴效果

    本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis

  • 纯JavaScript手写图片轮播代码

    废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2p

  • 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程！

    用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程! 下面代码有点多!但做出来你肯定喜欢! 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!我不想废话了,开门见山吧. 先看演示 :http://www.gz7y.com   点精彩推荐即可看见! 如果下面代码你看不懂或者做不出来,明天等待我的视频吧. CSS如下: <STYLE type=text/css> <!-- #f_div{width:230px; height:205px; margin:0 auto; ov

随机推荐