经过今天一翻改进，终于找出了解决DIV垂直居中的办法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";>
<html xmlns=";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS布局技巧：未知高度div 垂直居中的问题</title>
<style type="text/css">
html,body
{
height: 100%;
padding:0;
margin:0;
}
body
{
min-height: 200px;
text-align: center;
min-width: 402px
}
.FirstDIV
{
margin-top: -100px; /* SecondDIV高度的一半 */
float: left;
width: 100%;
height: 50%;
}
.SecondDIV
{
clear: both;
border: silver 1px solid;
background: #666;
margin-left: auto;
overflow: auto;
width: 400px;
margin-right: auto;
height: 200px;
text-align: left
}
</style>
</head>
<body>
<div class="FirstDIV"></div>
<div class="SecondDIV">
<p>看看，这不就居中了。呵呵。而且没有问题哦。 </p>
<p>body{ background-color:#FFF5F0}<br>
div{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px;
width:400px; height:200px; border:1px #CCCC00 solid; font-family:Arial,
Helvetica, sans-serif; color:#666666 } </p>
</div>
</body>
</html>
DIV垂直居中的办法
时间： 2024-11-18 12:12:54
DIV垂直居中的办法的相关文章
实现div垂直居中的CSS代码
我学到的第一个CSS知识就是如何把一个固定宽度和高度的元素水平或者垂直居中.这些居中的内容可能是入站欢迎页面(Splash Page http://searchsoa.techtarget.com/sDefinition/0,,sid26_gci213036,00.html)中图片,或者是一些设计喜欢的居中设计的网站等.最原始的解决办法就是把元素在窗口中距左和距上边缘进行50%的绝对定位.当然这只是把元素的右上角移动到了窗口的中央,接下来你还需要设置负的margin-left和margin
CSS解决未知高度的DIV垂直居中
css|解决 原文标题:Vertical Centering in CSS副标题:Yuhu's Definitive Solution with Unknown Height 尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (dis
DIV垂直居中的多种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中无效.下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点.(可以看看测试页面,有简短解释.) 方法一: 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性. 优点: content
div垂直居中代码
主要的样式定义如下: example source code [www.111cn.net] 代码如下 复制代码 body {text-align: center;} #center { margin-right: auto; margin-left: auto; } 首先在父级元素定义text-align: center;这个的意思就是在父级元素内的内容居中: 对于ie这样设定就已经可以了.但在mozilla中不能居中.解决办法就是在子元素定义时候设定时再加上margin-right: a
实现div垂直居中的display:table-cell方法示例介绍
ie7和ie6都不能识别 display: table-cell;(但是支持display: block等css1的属性!) ie8以及以后版本可以识别! ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话,设置line-height就可以实现居中显示了! 如果要实现盒模型中的div居中,可以参考以下代码: div#wrap { display: table; border: 1px solid #FF0099; background-color
css实现 IE6下div垂直居中对齐
代码如下 复制代码 <style type="text/css"> .fixVerticalCenterOuter{ width:300px; height:200px; border:1px solid #ccc; text-align:center; display:table-cell; vertical-align:middle; } /* for IE 6 */ * html .fixVerticalCenterAdd { width:0; height:1
flash遮住div层解决办法（兼容所有浏览器)
大家最常用的办法就是 •ie:在<object>标签中增加: 代码如下 复制代码 <param name="wmode" value="transparent"> • •Firefox:在 代码如下 复制代码 <object>-><embed>标签中增加 wmode="transparent",即<embed wmode="transparent" ->
CSS让DIV水平垂直居中（兼容IE/FF/google浏览器）
实例 代码如下 复制代码 <style type="text/css"> body { margin: 0; padding: 0; background: #1d1d1d; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { font: 4em Georgia, "Times New Roman", Times, serif; color: #fff;
DIV+CSS垂直居中一个浮动元素
场景:在一个固定高度的div中,有一个浮动的元素,需要将这个浮动元素垂直居中. 原始代码如下: 代码如下: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .wrapper{ width: 400px; height: 300px; background-color: #1f8dd6; } button{ float: r