纯CSS基于窗口垂直居中
都是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基于窗口垂直居中的更多相关文章
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 从项目需求角度，使用纯CSS方案解决垂直居中
CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...
- 纯css使div垂直居中，div垂直，div居中的方法
首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...
- 未知高度-纯css实现水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用纯CSS方案，解决垂直居中
CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...
- 纯CSS实现垂直居中的7种方法
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...
- 基于flexbox纯css框架的解析
学CSS很好的一个方法大概是先用纯CSS来实现一个自己的框架,然后便可以在之后的使用中对一开始可能很粗糙的框架做细致的优化与改进,删除些冗余,添加些功能之类的. 当然,为了避免一开始写框架时候的时候手 ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
随机推荐
- web前端性能测试小点
关于前端性能的文章: http://www.cnblogs.com/fnng/archive/2011/09/19/2181894.html web应用的前端性能响应时间指浏览器的页面加载时间.浏览器 ...
- POJ 1707 Sum of powers（伯努利数）
题目链接:http://poj.org/problem?id=1707 题意:给出n 在M为正整数且尽量小的前提下,使得n的系数均为整数. 思路: i64 Gcd(i64 x,i64 y) { if( ...
- 注册表删除chrome插件
注册表,对于绝大部分人来说,都是一个比较陌生的东西.然而,我们的几乎所有软件都会在这里出现. 就最近一次,公司给每个员工的chrome浏览器绑定的一堆插件,并且无法删除.手动删除插件文件后,重启机器又 ...
- Internet Explorer for Mac the Easy Way: Run IE 7, IE8, & IE9 Free in a Virtual Machine
From link: http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/ If you’re ...
- java--关键字和保留字
关键字:Java的关键字对java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等. 保留字:为java预留的关键字.现在还没用到,但是在升级版本中可能作为关键字. 访问控制:pr ...
- UVa 1152 4 Values whose Sum is 0
题意:给出n,四个集合a,b,c,d每个集合分别有n个数,分别从a,b,c,d中选取一个数相加,问使得a+b+c+d=0的选法有多少种 看的紫书,先试着用hash写了一下, 是用hash[]记录下来a ...
- UVALive 4287 Proving Equivalences（缩点）
等价性问题,给出的样例为 a->b的形式,问要实现全部等价(即任意两个可以互相推出),至少要加多少个形如 a->b的条件. 容易想到用强连通缩点,把已经实现等价的子图缩掉,最后剩余DAG. ...
- I.MX6 Linux udev porting
/*********************************************************************** * I.MX6 Linux udev porting ...
- 物联网操作系统HelloX应用编程指南
HelloX操作系统应用编程指南 HelloX应用开发概述 可以通过三种方式,在HelloX操作系统基础上开发应用: 1． 以内部命令方式实现应用,直接编译链接到HelloX的内核she ...
- Java [Leetcode 190]Reverse Bits
题目描述: everse bits of a given 32 bits unsigned integer. For example, given input 43261596 (represente ...