css3 transform实现水平和垂直居中

代码如下：

<!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>

转载于:https://www.cnblogs.com/yeqrblog/p/8961264.html

css3 transform实现水平和垂直居中相关推荐

使用css3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
Css学习总结（3）——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局水平居中子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
如何让盒子实现水平和垂直居中
让盒子实现水平和垂直居中(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
水平、垂直居中布局大全
文章目录水平居中布局 text-align margin + auto float + margin auto position + transform / margin flex + justif ...
CSS、JS 使DIV水平和垂直居中的各种方法
在Web开发中,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div. 在这里,我 ...
14种CSS实现水平或垂直居中的技巧
前言 css水平和垂直居中是一个亘古不变的话题,它常常出现在优美的网页上以及各大前端面试当中. 说来惭愧,在两年前面试的时候,我完全不知道如何做到水平和垂直均居中的方法,那场面别提有多尴尬了(ps:特 ...
理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
【CSS3】理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

css3 transform实现水平和垂直居中

css3 transform实现水平和垂直居中相关推荐

最新文章

热门文章