transform:translate(-50%,-50%)实现水平垂直居中

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。

当使用：top: 50%;left: 50%;，是以左上角为原点，故不处于中心位置

translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。

 1 .content {2     padding:10px;3     background:green;4     color:#fff;5     position:absolute;6     top:50%;7     left:50%;8     border-radius: 5px;9     -webkit-transform: translate(-50%,-50%);
10     -moz-transform: translate(-50%,-50%);
11     transform:translate(-50%,-50%);
12 }

transform:translate相关推荐

transform: translate()
transform: translate(-50%, 50%) 以上属性,元素会以自身的左上角为原点,往上往左分别移动自身长宽的50%,以使其居于中心位置. 与负的margin-left和margin ...
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(-50%,-50%)实现水平垂直居中

transform:translate相关推荐

最新文章

热门文章