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

2016-02-19 14:18 2 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 时，顶部和左部内容会有所隐藏。

来源:https://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...

DIV实现垂直居中对齐的方法

标签： Web开发

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持...

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...

DIV+CSS必须考虑的浏览器兼容的技巧

标签： Web开发

1,盒解释器的不同解释. #box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0 } #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width :500px; //for ie6.0- } 2,在ie中隐藏css,使用子选择器 htmlbody #box{ } 3,只有ie识别 *html #box{ } 4,在ie/win有效而ie/max隐藏,使用反斜杠 ...

查看更多精彩>>