[加入收藏]
[
教程购买
]
[服务指南]
首页
|
办公自动化
|
网页制作
|
平面设计
|
动画制作
|
数据库开发
|
程序设计
|
全部视频教程
应用视频:
Windows
|
Word2007
|
Excel2007
|
PowerPoint2007
|
Dreamweaver 8
|
Fireworks 8
|
Flash 8
|
Photoshop cs
|
CorelDraw 12
编程视频:
C语言视频教程
|
HTML
|
Div+Css布局
|
Javascript
|
Access数据库
|
Asp
|
Sql Server数据库
|
Asp.net
|
Flash AS
编程视频:
C语言视频教程
|
HTML
|
Div+Css布局
|
Javascript
|
Access数据库
|
Asp
|
Sql Server数据库
|
Asp.net2.0
|
Flash AS
应用视频:
Windows
|
Word2007
|
Excel2007
|
PowerPoint2007
|
Dreamweaver 8
|
Fireworks 8
|
Flash 8
|
Photoshop cs
|
CorelDraw 12
文字教程:
Windows教程
|
Word教程
|
Excel教程
|
PowerPoint教程
视频教程
:
Windows视频教程
|
Word2007视频教程
|
Excel2007视频教程
|
PPT2007视频教程
文字教程:
Dreamweaver教程
|
Fireworks教程
|
Flash教程
|
PhotoShop教程
|
HTML教程
|
Div+Css布局教程
视频教程:
Dreamweaver视频教程
|
Fireworks视频教程
|
Flash视频教程
|
PhotoShop视频教程
|
HTML视频教程
|
DIV+CSS视频教程
文字教程:
Fireworks教程
|
PhotoShop教程
|
CorelDraw教程
视频教程:
Fireworks 8视频教程
|
PhotoShop CS视频教程
|
CorelDraw12视频教程
文字教程:
Flash教程
|
Flash AS脚本教程
视频教程:
Flash 8视频教程
|
Flash AS视频教程
文字教程:
Access教程
|
sql server教程
视频教程:
Access数据库视频教程
|
Sql Server2005数据库视频教程
文字教程:
C语言教程
|
Javascript教程
|
Asp教程
|
Asp.Net网站开发教程
视频教程:
C语言视频教程
|
JavaScript视频教程
|
ASP视频教程
|
ASP.NET视频教程
|
网站制作视频教程
|
ASP动态网站制作视频教程
当前位置 >
文字教程
>
div+css布局教程
Tag:
css
,
入门
,
技巧
,
div
,
实例
,
示例
,
菜单
,
布局
,
web2.0
,
ul
,
li
,
经验
,
列表
,
web标准，xhtml
,
web标准
,
浏览器
,
兼容
,
css hack
,
表格
,
视频教程
如何让层垂直居中于浏览器窗口？
文章类别：
div+css布局
| 发表日期:2008-9-26 11:13:03
层垂直居中于浏览器，一直是新手朋友比较头疼的问题。
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。
层垂直居中于浏览器的例子
Source Code to Run
[www.21shipin.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>21shipin.com</title> <style type="text/css"> div { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; height:300px; border:1px solid red; } </style> </head> <body> <div>21shipin.com - Div CSS布局 常见问题</div> </body> </html>
[ 可先修改部分代码 再运行查看效果 ]
上一篇：
{教程}如何处理图标文字的混排？
人气:4315
下一篇：
{教程}标题元素、段落和强制换行如何正确使用？
人气:2933
div+css布局视频教程
Windows操作
[文]
Word教程
[文]
Excel教程
[文]
PowerPoint
[文]
Dreamweaver
[文]
Fireworks
[文]
Flash教程
[文]
PhotoShop
[文]
CorelDraw
[文]
C语言教程
[文]
Html教程
[文]
Div+Css布局
[文]
Javascript
[文]
ACCESS数据库
[文]
ASP教程
[文]
SQLServer
[文]
ASP.NET教程
[文]
FlashAS
[文]
视频教程列表
计算机基础入门及办公自动化:
Windows视频教程
Word视频教程
Excel视频教程
PPT视频教程
网页制作开发视频教程:
Dreamweaver视频教程
Fireworks视频教程
Flash视频教程
Photoshop视频教程
HTML视频教程
Div+Css布局视频教程
静态网站项目实例视频教程
平面广告设计视频教程
Fireworks视频教程
Photoshop视频教程
CorelDraw视频教程
初级程序设计及ASP动态网站开发
C语言视频教程
Javascript视频教程
Access数据库视频教程
Asp网站开发视频教程
Asp项目实例开发视频教程
Asp.net动态网站开发视频教程
Sql Server数据库视频教程
Asp.net视频教程
Flash 动画角本编程视频教程
Flash视频教程
Falsh MTV视频教程
文章教程搜索
输入您的搜索字词
google
本站
提交搜索表单
div+css推荐教程
.div+css布局视频教程(21视频教程
.DIVCSS布局实例：DIV CSS新闻列表
.{WEB标准}用Css来制作一个更漂亮
.{WEB标准}推荐： CSS样式表设计经
.{WEB标准}CSS实现当前页的滑动门
.{WEB标准}alt属性和title属性
.{WEB标准}w3c技术架构介绍
.{WEB标准}web标准概念入门
.{XHTML}HTML表格标记教程(38):表
.{XHTML}HTML表格标记教程(37):表
.{CSS}学习CSS制作网页总结的一些
.{CSS}写给刚刚接触web标准的新人
.{CSS}display:inline及与float:
.{CSS}CSS代码结构初探：根基的建
.{CSS}CSS提高网页的维护更新效率
.DOV CSS表单：超炫的单选框与复选
.用背景图片实现CSS柱状图表一例
.XHTMLCSS网页布局中ID与class的
.DIVCSS教程：判定用户浏览器及分
.如何制作可控制显示或隐藏的伸缩
.用CSS控制输入框input样式，悬停
.如何实现多风格选择样式实时切换
.段落前面空两个字，不使用空格。怎
.border与list缩写的时候应该注重
.CSS对文字溢出时的自动隐藏处理
.Div CSS三列布局最先显示中列的
.DIV CSS布局概述及初步入门
.在WEB标准中嵌入Flash的最佳方法
.Div CSS布局网站设计的优点！
div+css热门教程
.CSS教程:链接外虚线框的设定hid
.2012年做的不错的CSS网站分享(5
.2012年做的不错的CSS网站分享(4
.2012年做的不错的CSS网站分享(3
.2012年做的不错的CSS网站分享(2
.2012年做的不错的CSS网站分享(1
.CSS教程：CSS3 Transform的persp
.CSS教程：CSS3 Transform的persp
.CSS教程:CSS变换(transition)
.CSS教程：初学者使用div和css误区
.Div+Css教程：CSS开发工具介绍（3
.Div+Css教程：CSS开发工具介绍（2
.Div+Css教程：CSS开发工具介绍（1
.Div+Css教程：display:none与vis
.CSS教程：背景图像属性backgroun
.CSS教程：CSS宽度的计算
.css教程：实现图片透明度链接效果
.css教程：position属性介绍
.CSS教程：解决商城商品图片不显示
.CSS教程：淘宝网导航交互的小三角
.CSS教程：圆角代码实现案例
.CSS教程：如何消除inline-block元
.CSS教程：如何消除inline-block元
.CSS教程：什么是inline-block元素
.CSS教程：腾讯QQ对话框抖动效果模
.CSS教程：百度首页模拟代码
.CSS教程:预处理器的Sass和less进
.CSS教程:CSS预处理器的介绍
.CSS教程:制作网页变色按钮
.CSS教程：transform属性介绍
Word教程网
Excel教程网
Dreamweaver
教程网
Fireworks教程网
PPT教程网
FLASH教程网
PS教程网
HTML教程网
DIV CSS教程网
FLASH AS教程网
ACCESS教程网
SQL SERVER教程网
C语言教程网
JAVASCRIPT教程网
ASP教程网
ASP.NET教程网
CorelDraw教程网
关于我们
|
教程购买
|
广告刊登
|
网站地图
|
湖北继续教育网
|
QQ：2693987339(点击联系)购买教程光盘
地址：湖北省武汉市曹家湾32号501室 电话：027－86646545 15972130058
--
教程购买问题汇总
21视频教程网专业的网站开发视频教程学习网站
ICP备案号：
鄂ICP备14009716号-13
公安备案号：
42011102002974
看全部视频教程
购买方式/价格
:
咨询客服
tel:
15972130058
Source Code to Run [www.21shipin.com]
QQ：2693987339(点击联系)购买教程光盘
:
