DIV+CSS 全屏垂直居中的一个办法

  全屏垂直居中的一个办法 DIV+CSS , 这个方面有一点不好, 就是不能自动适应,必须把高和宽写死!

  例如下边的例子!

  先定了一个点在中间,然后再把里边的这一块居中处理;

<style>
#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}
#center{background:#FFCC33;border:1px solid #0033FF; width:300px;height:300px;position:absolute; margin:-150px;}
</style>
<div id="info">
<div id="center">www.aa25.cn</div>
</div>

     按照上面的代码示例,就可以实现全屏居中了。

时间: 2024-07-30 10:32:06

DIV+CSS 全屏垂直居中的一个办法的相关文章

div+css全屏布局设计

全屏布局,有点像vc的界面.来了兴趣,就写了一个. 运用IE6的怪异模式,通过绝对定位来实现的. [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

DIV+CSS实现内容垂直居中的一个例子

css ======================CSS=======================.holder{ width:740px; height:300px; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}/*以下样式针对IE*/.edge{ width:0; height:100%; display:inline-block; vertical-align

如何使文本在DIV+CSS布局中垂直居中

css DIV+CSS布局中垂直居中的实现. <html><head><style>body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto;height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}</style></head><body><

解决玩游戏不能全屏问题的解决办法

人们在使用笔记本玩游戏时有时会发现屏幕居中两边有黑条,一些台式机的宽屏显示器也经常出现下玩游戏不能全屏的问题,下面给大家介绍游戏不能全屏问题通用解决方法. 一.修改注册表中的显示器的参数设置. Win键+R键,打开运行窗口,输入regedit回车,这样就打开了注册表编辑器,然后,定位到以下位置: HKEY_LOCAL_MACHINESYSTEMControlSet001ControlGraphicsDrivers Configuration在Configuration这上面右键,选择查找,输入S

让您头痛的DIV+CSS网页错位诊断及解决办法

常见DIV+CSS网页错位问题 1.网页在某版本的浏览器中显示正常,不同其它版本浏览器显示错位不正常 2.本来是左右结构网页布局,但是左右成上下结构错位 3.文字列表型字行在不同浏览器中高度不一 等等... 解决CSS网页错位总体思路 1.遇到在不同版本浏览器中显示高矮不一可以使用CSS hack来解决 2.如果左右结构网页布局成了上下结构布局.解决方法是检查float浮动是否设置好;检查左右宽度是否计算正确,是否是设置左右宽度大于了总宽度导致的上下结构;div开始与div结束包含是否正确,可以

网页文字在DIV+CSS布局中垂直居中的问题

css|网页|问题 1.单行文字 设置div的高度与文字的行高一样就可以了,即 line-height 和 height 的数值是一样的就可以了,最后给div一个 over-flow: hidden ,让超出的部分隐藏. 这种方法支持块级和内联极元素以及所有的浏览器,不过只能显示一行,而且IE中不支持< img >等的居中,之所以要用 overflow: hidden ,是因为当用户放大字体时,字会超出div的范围. div{ height: 20px; line-height: 20px;

js div 顶部全屏广告代码

提示:您可以先修改部分代码再运行 提示:您可以先修改部分代码再运行

How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口)

原文链接:http://www.sitepoint.com/use-html5-full-screen-api/        如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Full-Screen API的介绍,并且当时就提到其实现细节可能会被修改,但是没有想到一年后我需要重写!本篇的所讲的内容也许不是最新的,但是非常感谢David Storey帮我重点归纳出近期技术方面的变化....        什么是Full-Screen API?        此AP

【Win 10应用开发】实现全屏播放的方法

原文:[Win 10应用开发]实现全屏播放的方法 有人会问,以前的MediaElement控件不是有现成的一排操作按钮吗?而且可以直接进入全屏播放.是的,我们知道,以往的Store App都是在全屏模式下运行的,只要MediaElement控件填满整个窗口,就等于全屏播放了,但是,Win10应用是窗口化的,将MediaElement控件的IsFullWindow属性设置为true后,就会这样:   从上面的截图看,MediaElement控件只是覆盖整个窗口而已,并没有实现全屏.那有办法让它全屏