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未知高度垂直居中
查看全文
相关阅读:
Echarts 实现中国地图并轮播指定的地区?
Linux安装Zookeeper
初遇携程apollo配置中心
eclipse安装lombok
依赖layui form模块 复选框tree插件(拓展可根据属性单选还是多选,数据反选)
centos7环境下mysql5.7的安装与配置
中文算数验证码(加减乘除)
获取请求主机IP地址,如果通过代理进来,则透过防火墙获取真实IP地址;
jdk自带的MD5进行数据的加密与解密
MyBatis-plus 代码生成器
原文地址:https://www.cnblogs.com/rubylouvre/p/3157572.html
最新文章
前端页面布局中水平、垂直居中问题
动态创建并访问网页元素
在OCX初始化时获取其在网页中的DOM对象
Windows 8.1下使用IE 64位
fstream读写UNICODE文件
BHO多线程中实现右键菜单
解决Jenkins上git出现的“ERROR: Error fetching remote repo 'origin'”问题
解决Jenkins上git出现Timeout的问题
以Crypto++实现RSA加解密二进制数据
mina变长帧处理
热门文章
maven compile时出现“非法字符: 65279”的解决
C++ win32 dll 引用外部CLR,加载托管程序集异常-Error 10 error LNK2019: unresolved external symbol _CLRCreateInstancet
C++ 指针基址1
像这样玩C#【转】,觉得文章写的不错就转来啦!版权不在我
Hooking EndScene
C# Self Injector into non managed process
Menu [D3D9 Source]
DirectX
Asynchronous C# server[转]
通用 C# DLL 注入器injector(注入dll不限)
Copyright © 2011-2022 走看看