CSS 利用transform达到居中效果
<body>
<div class="center">
....
</div>
</body>
让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了
.center{
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
CSS 利用transform达到居中效果的更多相关文章
- 深入理解CSS变形transform(2d)
× 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...
- CSS变形transform(2d)
前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...
- CSS 居中效果完整指南
本文翻译自:<Centering in CSS: A Complete Guide> 使用 CSS 实现效果困难吗?显然不是.实际上有许多方法可以实现居中效果,但在具体情况中,我们往往无法 ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- 讨论CSS中的各类居中方式
今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居 ...
- CSS 控制元素 上下左右居中
不说废话,直接 搞起..... 首先,我们将题目 <css控制元素上下左右居中> 分析一下哈,我是将其分成了4部分信息: 1.CSS控制: 只用 CSS 来达成目的 2.元素: 不只是d ...
- CSS垂直水平完全居中手册
水平居中 内联元素(inline or inline-*)居中? 你可以让他相对父级块级元素居中对齐 .center-children { text-align: center; } 块级元素(blo ...
- CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...
- css绝对定位元素实现居中的几个方法
一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...
随机推荐
- CF 447A(DZY Loves Hash-简单判重)
A. DZY Loves Hash time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- HDU3183 RMQ/贪心
A Magic Lamp Problem Description Kiki likes traveling. One day she finds a magic lamp, unfortunately ...
- 用Arduino+OSC建立一个iPad铁路王国巡视机
翻译自:http://blog.mydream.com.hk/howto/build-up-a-ipad-plarail-patrol-with-arduino-osc 简单介绍 这个教程告诉你怎样建 ...
- 粗结MySql数据库基础知识点之一
首先弄什么是数据库? 数据库就是用来存储和管理数据的仓库. 数据库存储数据的优点: 1.可存储大量的数据 2.方便检索 3.保持数据的一致性,完整性 4.安全 可共享 5.通过组合分析,可以产 ...
- RabbltMQ
协议:AMQP协议 支持事务 端口号:默认端口5672 1.简单队列(simple queue) 一个生产者对应一个消费者 2.工作队列(work queue) 一个生产者对应多个消费者: 轮询分发 ...
- Redis(五)-数据库
Redis是一个字典结构的存储服务器,而实际上一个Redis实例提供了多个用来存储数据的字典,客户端可以将制定的书存储在哪个字典中,这与关系书库实例中可以i创建多个数据库类似,所以可以将其中的每个字典 ...
- html中<a>标签_top和_parent的区别
在html中,<a>标签有个target属性,而targe属性有四个值,分别是:_blank._self._top._parent.前两个相信很好理解,第一个就是在新窗口中打开的意思,第二 ...
- 使用Attiny 85开发板制作BadUSB
什么是BadUSB?请查看:http://www.baike.com/wiki/BadUSB 或者看看腾讯这个视频!https://v.qq.com/x/page/l01425u2igw.html ...
- WebApi中对请求参数和响应内容进行URL编码解码
项目经测试,发现从IE提交的数据,汉字会变成乱码,实验了网上很多网友说的给ajax加上contentType:"application/x-www-form-urlencoded; char ...
- Spring 整合 Redis (零配置) 的简单使用
pom.xml <!--jedis--> <dependency> <groupId>redis.clients</groupId> <artif ...