<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<title>CSS未知高度垂直居中</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: #CCCCCC;
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>我是模板无忧（<a href="/jscss/">mb5u.com</a>）提供各类编程源码、视频教程、JavaScript/CSS特效代码以及常用软件下载等。<br>看我是不是垂直居中了？</p>
</div>
</body>
</html>

以上方式测试了下 ，发觉兼容性还不错

还有一种实现方式，是通过onresize 。onresize事件会在窗口或框架被调整大小时发生。

在事件里面计算出要居中的内容的top，left值，设置css.

CSS未知div高度垂直居中代码_层和布局特效的更多相关文章

  1. 纯CSS实现Div高度根据自适应宽度（百分百调整）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  3. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  4. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  5. css让div水平垂直居中

    示例1: .div1{ width:200px; height:300px; border:1px solid #000; position: relative; } .div2{ width: 40 ...

  6. css实现div水平垂直居中

    中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...

  7. CSS实现DIV水平 垂直居中-1

    水平大家都知道,一般固定宽度给个margin:0 auto:就可以了.下面实现水平垂直都居中 HTML <div class="parent"> </div> ...

  8. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

  9. 纯Css实现Div高度根据自适应宽度（百分比）调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...

随机推荐

  1. nginx学习六 高级数据结构之双向链表ngx_queue_t

    1 ngx_queue_t简单介绍 ngx_queue_t是nginx提供的一个轻量级的双向链表容器,它不负责存储数据,既不提供数据的内存分配.它仅仅有两个指针负责把数据链入链表.它跟stl提供的qu ...

  2. 毕业论文endnote使用

    毕业论文的参考文献的标准格式,参考了一下文章 http://blog.sina.com.cn/s/blog_62a1f43801016fq5.html http://blog.csdn.net/zhe ...

  3. PyQt主窗体设置停靠窗口(QDockWidget)的叠加顺序

    PyQt提供了方便的停靠窗口控件,我们可以很方便的编写一个停靠窗口,代码和效果如下: # -*- coding: utf-8 -*-from PyQt4 import QtGui, QtCore cl ...

  4. 【转】Visual Stdio VS 错误 error : 0xC00000FD: Stack overflow. 更改堆栈空间解决栈溢出问题

    原文见:http://www.cnblogs.com/xiangwengao/archive/2012/03/16/2399888.html 问题 给一个程序添加小功能,在debug下能正常运行,在r ...

  5. phpmailer发送邮件，可以带附件

    先从网上下载phpmailer压缩包 将解压的文件导入到你的项目中 实例 require_once ('PHPMailer/class.phpmailer.php'); //引入phpmailer文件 ...

  6. 基于visual Studio2013解决C语言竞赛题之0418位数操作

      题目 解决代码及点评 /************************************************************************/ /* 18． 给 ...

  7. 基于visual Studio2013解决C语言竞赛题之0602最大值函数

     题目

  8. 【Android LibGDX游戏引擎开发教程】第06期：图形图像的绘制（下）图片整合工具的使用

    在上一篇文章中,我们提到了图片必须是2的n次方的问题.但是随着Libgdx的不断完善和发展,使用一些工具就 可以很好的解决了这样一个问题,但是它的功能又不仅仅只限于此,那么下面就来让我们看看Textu ...

  9. 软件顾问可视设计的得力助手——PowerMockup

    你可能是一位从事信息化的软件顾问,你也可能是一位软件设计师,你须要通过图形直观的向客户表达你的设计意图. 你可能已经积累了非常多的Powerpoint图形元素,但每次都要从以往的文件里到处寻找,浪费您 ...

  10. HDU 3033 分组背包

    给出N个物品.M金钱.W种类 给出N个物品的性质:所属种类,花费.价值 求每一种类物品至少一个的前提下,所能购买到的最大价值 dp[i][k]表示在第i种物品.总花费为k的最大价值 dp[i][k]= ...