transform: translate()

transform: translate(-50%, 50%)

以上属性，元素会以自身的左上角为原点，往上往左分别移动自身长宽的50%，以使其居于中心位置。

与负的margin-left和margin-top实现居中不同，margin-left和margin-top必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中。

转载于:https://www.cnblogs.com/xjy20170907/p/11237702.html

transform: translate()相关推荐

transform:translate
transform:translate(-50%,-50%)实现水平垂直居中 translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.. 当使用:top: ...
transform:translate()方法坐标详解
定义:translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. 但是如何移动呢?于是做了以下实验: 实验1.设置transform:translate(0px,0p ...
【CSS3 属性】CSS 3 transform:scale 与 transform:translate 作用在同一div元素，导致元素位置偏离
div 元素使用transform:translate(x,y)居中显示,并使用transform:scale(z)作为动画属性,导致transform:translate(x,y)失效效果如下图: ...
transform: translate(-50%,-50%)导致的像素（前端页面字体模糊）模糊问题解决办法
前言 1.在复现过程中发现FireFox并不会出现模糊的问题,而Chrome和新版Edge会有,并且是在有滚动条时才会模糊 2.文本内容是否模糊还与屏幕有关,高清屏(dpr > 2)下不容易触发 ...
CSS 2D 转换 transform translate() rotate() scale() skew() matrix()
CSS transforms 属性允许移动.旋转.缩放和倾斜元素. translate() rotate() scaleX() scaleY() scale() skewX() skewY() sk ...
transition transform translate 之间的区别
文章目录 01.transform(转换) 和 translate 02.transition(过渡) 01.transform(转换) 和 translate transform的中文翻译是变换.变 ...
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
transform，translate，transition 的区别
一. transform是变形,css 2D转换,包含以下几种方法:旋转rotate,扭曲skew,缩放scale,移动translate和矩阵变形matrix. translate():根据x ...
css3属性transform之translate
translateY & translateX 偏移 transform:translate(60px); /* 沿X轴偏移60px(默认向右值为负数则向左) */ transform:tra ...

transform: translate()

transform: translate()相关推荐

最新文章

热门文章