css3-- transform: translate(-50%,-50%);

最新推荐文章于 2025-10-07 21:43:58 发布
原创 最新推荐文章于 2025-10-07 21:43:58 发布 · 7.8k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了如何使用CSS的绝对定位和transform属性实现元素在页面上的精确居中。通过设置top和left属性为50%，再结合transform的translate(-50%,-50%)，可以使元素无论大小都能完美居中显示。

代码：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置

CSS 实现视差滚动：详解 background-attachment 与 transform:translate3D 及应用
向着太阳迎着光
12-04 948
背景固定（background-attachment）：适用于简单的视差滚动，背景图像不随页面滚动而动，常用于大背景图展示。：使用 CSS3 变换和 JavaScript 控制，实现更灵活的滚动效果，适用于前景和背景的独立滚动。perspective 和 transform：结合透视效果，创造更深的视觉层次，适合多层次的视差效果。视差滚动可以极大地提升用户体验，尤其是在长页面、单页应用和互动性强的网页中。通过 CSS 和 JavaScript 的结合，设计师可以创建富有动态感和沉浸感的网页效果。
-webkit-transform:translate3d(0,0,0)触发GPU加速，让网页动画更流畅
菜菜菜菜鸟の成长记
03-13 2万+
前段时间，按照美拍的视频效果写了一个效果类似的网页版的动画。电脑上安装了三种浏览器：IE、Chrome、Firefox。分别作了测试，结果显示Chrome在这方面的渲染效果最差，经常出现卡顿现象，ff表现最好。一直百思不得其解，尤其是之前使用canvas标签做图片滤镜效果，chrome浏览器居然显示不了滤镜效果，然而其他浏览器均能正常显示，大谷歌你肿么了...对渲染多张图片和动画效果表示放弃了么.
css中的“ transform: translate(-50%, -50%)； “的意思
qq_45207162的博客
06-14 7290
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
详解transform:translate(-50%,-50%)
热门推荐
qq_41083105的博客
03-26 4万+
关于transform:translate(-50%,-50%) 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。 这句话的应用场景是实现块居中，具体实现如下： <style> .outer { width: 300px; height: 300px; posit...
【前端基础】20、CSS属性——transform、translate、transition
陌上人如玉，公子世无双。
10-07 1375
常见的函数 ：具体数值（100px） 百分比（参照元素本身）设置 轴： 设置 轴： 五、缩放： 缩放：值个数一个值：设置 轴上的缩放。（ 轴默认也是一样的值） 两个值：设置 轴和 轴上的缩放 值类型 是 和 函数的缩写。 六、旋转： 值个数 一个值：表示旋转角度 值类型 常用单位 ：表示旋转角度 正数：顺时针旋转 负数、逆时针旋转 是 函数的缩写。 有很多单位 角度（） 百分度（） 弧度（） 圈数（） 七、 进行旋转或者说缩放的时候，都会
css3块元素居中
04-10
css3块元素居中
详解transform:translate(-50%,-50%)意思
yjg_773827531的专栏
10-31 2371
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;left: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。translate(-50%,-50%)是CSStransform属性的一种应用，用于元素的中心定位。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。
transform: translateY(-50%) 实现元素垂直居中效果
weixin_34187822的博客
04-26 159
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .center { 8 ...
前端3d动画-----平移 transform: translate3d（）
weixin_58694594的博客
08-21 674
必须加这个属性：transform-style: preserve-3d;
transform: translate(-50%, -50%);什么意思
08-21
此外，`transform` 属性属于 CSS3 的一部分，支持多种变形操作，如 `rotate`、`scale`、`skew` 等，`translate` 只是其中一种功能，用于移动元素的位置[^3]。 #### 浏览器兼容性 为了确保在旧版浏览器中也能正常...
CSS中的translate(-50%,-50%)实现水平垂直居中效果
01-21
translate(-50%,-50%) 属性： 向上和左，移动自身长宽的 50%，使其居于中心位置。 与使用margin实现居中不同的是，margin必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate函数中的百分比...
transform:translate(-50%,-50%)水平垂直居中效果
vicky_yongqi的博客
12-02 5231
transform: translateY(-50%) 实现元素垂直居中效果 transform:translate(-50%,-50%)实现水平垂直居中 通过position absolute和top 50%，结合transform产生效果。 eg.头部CSS排版 <style lang="stylus" rel="stylesheet/stylus"> .top_contai...
元素居中 前端
qq_48254349的博客
11-26 272
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
transform translateY(-50%) 实现元素垂直居中效果
weixin_30482181的博客
09-04 365
在相对的空间内，垂直居中。position: relative;top: 50%;transform: translateY(-50%); 无论内容怎么增加，全文都是垂直居中的。 转载于:https://www.cnblogs.com/peko/p/7473219.html...
水平居中和transform: translateY(-50%) 实现元素垂直居中
xianengneng的博客
11-01 5470
垂直居中 垂直居中内容 原理 transform: translateY(-50%); 让div 沿Y轴平移自身高度的一半
transform：translate(-50%，-50%)定位实现水平垂直居中
醉殇姒若梦遗年 ツ的博客
08-01 1186
HTML代码 <div id="translateTest"></div> CSS代码 #translateTest{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:...
CSS学习笔记——transform:translate(-50%,-50%)实现水平垂直居中
Jane的博客
01-07 3080
参考： https://blog.youkuaiyun.com/qq_41083105/article/details/115233510 https://www.cnblogs.com/knuzy/p/9993181.html translate()的使用 translate() 函数是CSS3的新特性。在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。 当使用下述样式， 块是以左上角为原点，故不处于中心位置。 top: 50%; left: 50%; 而 translate(-50%,-50%) 作用是，往
【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系
小秀的博客
06-23 2983
`top: 50%;` 和 `transform: translateY(-50%);`的区别和联系
.swiper-wrapper { position:relative; width:100%; -webkit-transition-property:-webkit-transform, left, top; -webkit-transition-duration:0s; -webkit-transform:translate3d(0px,0,0); -webkit-transition-timing-function:ease; -moz-transition-property:-moz-transform, left, top; -moz-transition-duration:0s; -moz-transform:translate3d(0px,0,0); -moz-transition-timing-function:ease; -o-transition-property:-o-transform, left, top; -o-transition-duration:0s; -o-transform:translate3d(0px,0,0); -o-transition-timing-function:ease; -o-transform:translate(0px,0px); -ms-transition-property:-ms-transform, left, top; -ms-transition-duration:0s; -ms-transform:translate3d(0px,0,0); -ms-transition-timing-function:ease; transition-property:transform, left, top; transition-duration:0s; transform:translate3d(0px,0,0); transition-timing-function:ease; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }逐行解释
最新发布
10-16
以下是对 `.swiper-wrapper` 类 CSS 代码的逐行解释： ```css .swiper-wrapper { /* 将元素的定位方式设置为相对定位，元素会相对于其正常位置进行定位 */ position: relative; /* 设置元素的宽度为其父元素宽度的 100% */ width: 100%; /* 定义 WebKit 浏览器下需要过渡的属性，包括 -webkit-transform、left 和 top */ -webkit-transition-property: -webkit-transform, left, top; /* 定义 WebKit 浏览器下过渡效果的持续时间为 0 秒 */ -webkit-transition-duration: 0s; /* 使用 WebKit 浏览器的 translate3d 方法将元素在三维空间中进行平移，这里在 x、y、z 轴上的偏移量分别为 0px、0、0 */ -webkit-transform: translate3d(0px, 0, 0); /* 定义 WebKit 浏览器下过渡效果的时间函数为 ease，即默认的过渡效果，开始和结束时较慢，中间较快 */ -webkit-transition-timing-function: ease; /* 定义 Firefox 浏览器下需要过渡的属性，包括 -moz-transform、left 和 top */ -moz-transition-property: -moz-transform, left, top; /* 定义 Firefox 浏览器下过渡效果的持续时间为 0 秒 */ -moz-transition-duration: 0s; /* 使用 Firefox 浏览器的 translate3d 方法将元素在三维空间中进行平移，这里在 x、y、z 轴上的偏移量分别为 0px、0、0 */ -moz-transform: translate3d(0px, 0, 0); /* 定义 Firefox 浏览器下过渡效果的时间函数为 ease */ -moz-transition-timing-function: ease; /* 定义 Opera 浏览器下需要过渡的属性，包括 -o-transform、left 和 top */ -o-transition-property: -o-transform, left, top; /* 定义 Opera 浏览器下过渡效果的持续时间为 0 秒 */ -o-transition-duration: 0s; /* 使用 Opera 浏览器的 translate3d 方法将元素在三维空间中进行平移，这里在 x、y、z 轴上的偏移量分别为 0px、0、0 */ -o-transform: translate3d(0px, 0, 0); /* 定义 Opera 浏览器下过渡效果的时间函数为 ease */ -o-transition-timing-function: ease; /* 使用 Opera 浏览器的 translate 方法将元素在二维平面上进行平移，这里在 x、y 轴上的偏移量分别为 0px、0px */ -o-transform: translate(0px, 0px); /* 定义 Internet Explorer 浏览器下需要过渡的属性，包括 -ms-transform、left 和 top */ -ms-transition-property: -ms-transform, left, top; /* 定义 Internet Explorer 浏览器下过渡效果的持续时间为 0 秒 */ -ms-transition-duration: 0s; /* 使用 Internet Explorer 浏览器的 translate3d 方法将元素在三维空间中进行平移，这里在 x、y、z 轴上的偏移量分别为 0px、0、0 */ -ms-transform: translate3d(0px, 0, 0); /* 定义 Internet Explorer 浏览器下过渡效果的时间函数为 ease */ -ms-transition-timing-function: ease; /* 定义标准浏览器下需要过渡的属性，包括 transform、left 和 top */ transition-property: transform, left, top; /* 定义标准浏览器下过渡效果的持续时间为 0 秒 */ transition-duration: 0s; /* 使用标准的 translate3d 方法将元素在三维空间中进行平移，这里在 x、y、z 轴上的偏移量分别为 0px、0、0 */ transform: translate3d(0px, 0, 0); /* 定义标准浏览器下过渡效果的时间函数为 ease */ transition-timing-function: ease; /* 定义 WebKit 浏览器下盒模型的计算方式为 content-box，即宽度和高度只包含内容，不包含内边距和边框 */ -webkit-box-sizing: content-box; /* 定义 Firefox 浏览器下盒模型的计算方式为 content-box */ -moz-box-sizing: content-box; /* 定义标准浏览器下盒模型的计算方式为 content-box */ box-sizing: content-box; } ```
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值