都是IE8＋的

<!DOCTYPE html>
<html>
<head>
<title>基于窗口垂直居中　by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
body{
background-image:url(about:blank); /* for IE6 */
}

.fixed{
position: fixed;
left: 50%;
top:50%;
height: 0;/* 不占据位置 */
background-color: red;
}

.relative{
position: relative;
left: -50%;/*处理水平方向 */
/*处理垂直方向*/
-webkit-transform: translateY(-50%) translateZ(0);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%) translateZ(0);

background-color: pink;
}

.content{
padding:80px;
background-color: lightblue;

}

</style>

</head>
<body >
<h1<基于窗口垂直居中　by 司徒正美</h1>
<button onclick="document.getElementById('dialog').style.display = 'block'">open</button>

<div class="fixed" id="dialog">
<div class="relative">
<div class="content">
<button style='position: absolute;right:0;top:0' type='button' onclick="document.getElementById('dialog').style.display = 'none'">close</button>
XXXXXXXXXXXXXXXXX
</div>
</div>
</div>

</body>
</html>

运行代码

<!DOCTYPE html>
<html>
<head>
<title>基于窗口垂直居中　by 司徒正美</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
body{
background-image:url(about:blank); /* for IE6 */
}

.fixed{
position: fixed;
left: -100%;
right:100%;
top:0;
bottom: 0;
background-color: #CCC;
text-align: center;
font-size: 0;

}
.fixed:after {
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;

}

.content{
display: inline-block;
*display: inline;
*zoom:1;
vertical-align: middle;
text-align: left;
position: relative;
right: -100%;
font-size: 16px;
background-color: lightgreen;
width：150px;
height: 150px;
}

</style>

</head>
<body >
<button onclick="document.getElementById('dialog').style.display = 'block'">open</button>
<h1>基于窗口垂直居中 2　by 司徒正美</h1>
<div class="fixed" id="dialog">

<div class="content">
<button style='position: absolute;right:0;top:0' type='button' onclick="document.getElementById('dialog').style.display = 'none'">close</button>
XXXXXXXXXXXXXXXXX
</div>

</div>

</body>
</html>

运行代码

相关链接：CSS未知高度垂直居中

纯CSS基于窗口垂直居中的更多相关文章

  1. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 从项目需求角度，使用纯CSS方案解决垂直居中

    CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...

  3. 纯css使div垂直居中，div垂直，div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  4. 未知高度-纯css实现水平垂直居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 使用纯CSS方案，解决垂直居中

    CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...

  6. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  7. 基于flexbox纯css框架的解析

    学CSS很好的一个方法大概是先用纯CSS来实现一个自己的框架,然后便可以在之后的使用中对一开始可能很粗糙的框架做细致的优化与改进,删除些冗余,添加些功能之类的. 当然,为了避免一开始写框架时候的时候手 ...

  8. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  9. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

随机推荐

  1. IOS判断手机型号

    #define iPhone5 ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CG ...

  2. apk反编译(2)smali语言及文件

    Smali语言是Davlik的虚拟机使用的一种语言,用toolapk反编译apk后,可以见到大量的.smali文件. 可以按照smali语法对其修改,然后重新生成一个未签名的apk. 下面是一个示例: ...

  3. Android Studio上的几个插件

    转载:http://blog.csdn.net/maosidiaoxian/article/details/44992655 以下所有插件都可以在Idea的插件库中找到,如果你与我一样在Android ...

  4. WindowManager.LayoutParams.type属性

    type 的取值: 应用程序窗口.      public static final int FIRST_APPLICATION_WINDOW = 1; 所有程序窗口的“基地”窗口,其他应用程序窗口都 ...

  5. 面试题_89_to_92_单元测试 JUnit 面试题

    89)如何测试静态方法?(答案)可以使用 PowerMock 库来测试静态方法. 90)怎么利用 JUnit 来测试一个方法的异常?(答案) 91)你使用过哪个单元测试库来测试你的 Java 程序?( ...

  6. bzoj1266: [AHOI2006]上学路线route

    最短路+最小割 首先如何使最短路变长?就是要每一条最短路都割一条边. 我们求出每个点到点1和点n的距离,就可以知道哪些边在最短路上(一开始没有想到求到0和n的距离,想用floyd,但是n=500,怕超 ...

  7. vssettings 的备份和导入

    vssettings 的作用:   vssettings的导出(也就是相当于是保存):   现在我们试试导入:找一个别人导出的包,我们导入试试.

  8. HDU 4609 3-idiots (FFT-快速傅立叶变换)

    [题意]给定N个树枝,求从中取出三个可以围成三角形的概率 [思路] 2013多校训练第一场比赛1010题. 一开始就想到了O(n^2)枚举前两个树枝和的算法,赛后群里大牛说计算所有两个树枝和的情况可以 ...

  9. 深入理解移动web开发之PPI，Pixel，DevicePixelRatio(转)

    如果你是一个开始接触移动Web开发的前端工程师,那么你或许也遇到了和我曾经遇到的过问题:有太多新的概念需要掌握,太多相似的概念需要区分.没关系,我将用两篇文章的篇幅来解决这些问题.上篇文章关于解释和区 ...

  10. 常用的PL/SQL开发原则

    (1)广泛使用绑定变量,特别是批量绑定,因为这可以有效的避免sql的硬解析和PL/SQL引擎和SQL引擎的上下文切换!(2)广泛使用UROWID来处理DML语句(UROWID是ROWID扩展,ORAC ...