css3 transform实现水平和垂直居中
2024-08-28 19:55:43
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html, body {
height: 100%;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
background: url("background.jpg") center no-repeat;
background-size: cover;
} .wrapper .login {
position: absolute;
width: 255px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #eee;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="login"></div>
</div>
</body>
</html>
最新文章
- iOS 中的 promise 模式
- some useful linux commands
- CSS:CSS样式表及选择器优先级总结
- VS.Net 2015 Update3 学习(1) 支持Webpack
- exit
- JAVA操作ORACLE数据库的存储过程
- Away3D引擎学习笔记,持续更新
- PHP中类的继承关系
- JavaScript头像上传器的实现
- 20175226 2018-2019-2《java程序设计》结对编程-四则运算(第二周-阶段总结)
- FPGA例化ROM存储表格
- 再看C# ThreadPool与Task的认识总结
- 了解Queue
- python之模块py_compile用法(将py文件转换为pyc文件)
- 【Java集合源码剖析】Hashtable源码剖析
- 2018.09.15 hdu3018Ant Trip(欧拉路)
- ZJOI2018 round^2 游记
- Asp.Net之后台载入JS和CSS
- GIS-005-Dojo &; jQuery 事件处理
- Ubuntu 14.04 配置安卓5.1编译环境