纯CSS基于窗口垂直居中 - 走看看

zoukankan html css js c++ java

纯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%; 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未知高度垂直居中

查看全文

相关阅读:
zabbix通过简单shell命令监控elasticsearch集群状态
 zabbix通过简单命令监控elasticsearch集群状态
 生产环境elasticsearch5.0.1和6.3.2集群的部署配置详解
 执行update语句mysql5.6报错ERROR 1292 (22007): Truncated incorrect DOUBLE value: '糖糖的坤大叔'
aliyun添加数据盘后的物理分区和lvm逻辑卷两种挂载方式
 aliyun添加数据盘parted方式分区格式化和lvm挂载及数据盘的扩容
 Zabbix Agent active批量调整客户端为主动模式监控
 aliyun服务器ecs被ddos后无法被zabbix-server监控的处理
 centos环境自动化批量安装jdk软件脚本
 centos环境自动化批量安装软件脚本

原文地址：https://www.cnblogs.com/rubylouvre/p/3157572.html

Copyright © 2011-2022 走看看