CSS：使DIV 在浏览器窗口中水平垂直居中

2016-02-19 14:18 4 1 收藏

下面，图老师小编带您去了解一下CSS：使DIV 在浏览器窗口中水平垂直居中，生活就是不断的发现新事物，get新技能~

【 tulaoshi.com - Web开发】

div style="position:absolute; top:50%; left:50%; margin:-200px 0 0 -275px; width:550px; height:400px"内容。图片文字flash等。请注意，div宽度高度以及margin负值需针对内容进行相应设置/div

说明：

绝对定位div
position:absolute;

顶部和左边距
top:50%; left:50%;

使用外补丁 margin 负值，负值大小为层自身高度宽度各除以二
margin:-200px 0 0 -275px;

测试环境：
IE6
Mozilla 2.0.0.5
Opera 9.22
Netscape 9.0b1
Safari for Windows 3.0.2

附：使用此方法有个 bug，当浏览器窗口小于 div 时，顶部和左部内容会有所隐藏。

来源:http://www.tulaoshi.com/n/20160219/1606661.html

上一篇： Delphi中创建MIDAS服务器并注册(MIDAS之二)
下一篇： Div+CSS布局入门

看过《CSS：使DIV 在浏览器窗口中水平垂直居中》的人还看了以下文章更多>>

CSS网页布局：div水平居中的各种方法

标签： Web开发

在Web标准中的页面布局是使用Div配合CSS来实现的。这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法：一、margin:auto 0 与 text-aligh:center 在现代浏览器（如Internet E...

ie8浏览器如何设置在新窗口中打开网页

标签：浏览器

ie8浏览器如何设置在新窗口中打开网页 1、先打开ie8浏览器，然后点击菜单栏上方的工具--Internet选项; 2、在打开的Internet选项窗口中的常规选项卡下，点击选项卡下的设置按钮; 3、接着在弹出的选项卡浏览设置界面中，在遇到弹出窗口时下选择始终在新选项卡中打开弹出窗口，然后点击确定就可以了。

CSS技巧：如何使未知高宽的图片实现垂直居中

标签： Html CSS布局 Div+CSS XHTML

在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的图片，图片定义相对定位的CSS。直接上CSS代码： #pic { width:300px; height:300px; background-color:green; border:6px solid #ccc; text-align:center; position:relative; display:table-cell; vertical-align:middle; } #pic p { *position:absolute;...

CSS定高多行垂直居中

标签： Web开发

用Table布局可以很容易的实现文字和图片的垂直居中，但是在div的布局中呢，要实现定高容器里面的内容的垂直居中不是太简单的事情。在DOM标准中在IE中综合 #boxOuter { display:table; height:300px; width:500px; border:solid 1px black; &n...

网页布局 CSS简单实现垂直居中

标签： Web开发

英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。译文内容：当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。旧的方法 ...

查看更多精彩>>