【CSS】`top: 50%；` 和 `transform: translateY(-50%)；`的区别和联系

最新推荐文章于 2025-06-02 09:41:00 发布
最新推荐文章于 2025-06-02 09:41:00 发布
阅读量2.9k 收藏 6
点赞数 7
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiugongHao/article/details/131355222

top: 50%; 和 transform: translateY(-50%);的区别

在某些情况下，top: 50%; 和 transform: translateY(-50%); 可以达到类似的效果，但它们实际上具有不同的工作原理和应用场景。

  1. top: 50%;：这是一个相对定位属性，用于设置元素相对于其包含块（通常是父元素）顶部的偏移量。top: 50%; 将元素的顶部边缘移动到其包含块的顶部边缘的中心位置。这通常用于垂直居中元素。

  2. transform: translateY(-50%);：这是一个变换属性，用于通过平移元素的 Y 轴（垂直方向）来改变元素的位置。translateY(-50%); 将元素相对于其自身高度的一半向上移动，实现了垂直居中的效果。

虽然这两种方法在某些情况下可以产生相似的效果，但它们的工作原理和使用方式是不同的。

主要区别如下：

  • top: 50%; 受到包含块的影响，所以需要确保父元素具有适当的定位（如相对定位、绝对定位）和高度，以确保居中效果。它在垂直居中元素时，对父元素的定位属性有一定要求。
  • transform: translateY(-50%); 不受包含块的影响，可以直接应用于元素本身，无需考虑父元素的定位属性。它适用于垂直居中元素，并且对于绝对定位和相对定位的元素都适用。

因此，虽然在某些情况下它们可能会达到相似的效果，但在应用和工作原理上存在差异。选择使用哪种方法取决于具体的布局需求和上下文环境。

top: 50%; 和 transform: translateY(-50%);的联系

例：需求为将子元素矩形垂直居中

  1. 当只有top: 50%; 时，矩形上边缘平移到整个高度的50%：

在这里插入图片描述
2. 当加上 transform: translateY(-50%);时，通过移动Y轴使矩形高度的中央和整个高度的中央对齐，才可以使中间的矩形实现居中对齐：
在这里插入图片描述

css3-- transform: translate(-50%,-50%);
yueliangyefan的博客
06-27 7804
代码： position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); 当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 ...
详解transform:translate(-50%,-50%)意思
yjg_773827531的专栏
10-31 2220
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;left: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。translate(-50%,-50%)是CSStransform属性的一种应用，用于元素的中心定位。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。
translate(-50%, -50%)：让元素与视口精确相遇的魔术坐标系
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-02 833
诞生于 Flexbox 之前，却并未因新标准而过时。它依托 transform 模块的“自参考”百分比规则，实现一种无需知道父盒尺寸、也不依赖文档流的 “块心对齐”。在弹性设计、响应动画乃至 WebGL HUD 里，它仍是轻量且高性能的利器。理解这一技巧背后的坐标系统、百分比语义与 GPU 合成成本，你便掌握了在复杂布局中游刃有余的终极锤子。
transform:translate(-50%,-50%)水平垂直居中效果
vicky_yongqi的博客
12-02 5154
transform: translateY(-50%) 实现元素垂直居中效果 transform:translate(-50%,-50%)实现水平垂直居中 通过position absolute和top 50%，结合transform产生效果。 eg.头部CSS排版 <style lang="stylus" rel="stylesheet/stylus"> .top_contai...
transform translateY(-50%) 实现元素垂直居中效果
weixin_30482181的博客
09-04 358
在相对的空间内，垂直居中。position: relative;top: 50%;transform: translateY(-50%); 无论内容怎么增加，全文都是垂直居中的。 转载于:https://www.cnblogs.com/peko/p/7473219.html...
transform: translateY(-50%) 实现元素垂直居中效果
weixin_34187822的博客
04-26 147
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .center { 8 ...
.main{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);检查代码问题并修改
12-04
这段CSS代码设置了`.main`元素的位置使其居中显示。... transform: translateX(-50%) translateY(-50%); } ``` 在这个修正后的代码中，`.container`负责整体的居中对齐，而`.main`只需要保持绝对定位。
style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%);"转为css代码
04-02
As an AI language model, I do not have any emotional state or consciousness, so the concept of null does not apply to me in the same way as it does for humans. However, in computer programming, null ...
.slider img:first-child { display: block; } .slider button { position: absolute; top: 50%; transform: translateY(-50%); background: transparent; border: none; font-size: 24px; color: #fff; cursor: pointer; }
06-11
这段 CSS 代码定义了滑块中的第一张图像和按钮的样式。 `.slider img:first-child` 选择第一个 `img` 元素，并将其 `display` 属性设置为 `block`，使其显示在滑块中。 `.slider button` 定义滑块中的按钮样式。`...
} 一个最长的用法就是：让弹出的元素始终位于页面的中间位置。首先position: fixed; top: 50%; left: 50%;让这个图片的左上角处在屏幕的正中间。然后让他上下位移transform:translateX(-50%) translateY(-50%);就是相对于这个图片的宽高的50%，也就是一半。移回来。 .center-vertical {    position: fixed;    top: 50%;    left:50%;      -webkit-transform: translate(-50%, -50%);    -ms-transform: translate(-50%,-50%);    -moz-transform: translate(-50%,-50%);    -o-transform: translate(-50%,-50%);    transform: translate(-50%, -50%);}肖肖肖丽珠关注120分享专栏目录CSS实现垂直居中的4种思路详解09-24CSS实现垂直居中是网页布局中的常见需求，本文将详细讲解四种不同的方法，帮助开发者更好地理解和运用这些技巧。 1. **行高line-height实现单行文本垂直居中** 单行文本的垂直居中可以通过设置`line-height`来实现...CSS进阶之形变与动画 (一)：transform、垂直居中总结、transition动画、animation动画、vertical-alignGood Good Study,Day Day Up! 1万+水平居中的方案行内级元素：设置父元素的 text-align:center块级元素：设置当前块级元素(要有宽度) margin:0 auto绝对定位：元素有宽度的情况下，设置left0、right0、margin:0 auto；flex布局：通过设置justify-content: center;垂直居中的方案绝对定位： 元素要有高度的情况下，设置top0、bottom0、margin:auto 0;flex布局 通过设置align-CSS 盒子垂直居中的方法_css transform居中3-15margin-top: 50%; // 向下移动父盒子的一半 transform: translateY(-50%); // 向上移动自身盒子的一半 } /* 通过 定位来移动*/ .father { width: 500px; height: 500px; background-color: skyblue; border: 1px solid #000; margin: 0 auto; position: relative; } .son { width: 200px; height...CSS进阶之形变与动画 (一):transform、垂直居中总结、transition动画、a...3-13translate的水平垂直居中 水平居中:使用left/translate,其中需要知道left是基于包含块的宽度,translate是基于自身的大小。 垂直居中: 使用top/translate,其中需要知道top是基于包含块的高度,translate是基于自身的大小。 .shuipin{ position: relative; left: 50%; transform: translateX(-50%); } .chuizhi{ position...transform 垂直居中weixin_33948416的博客 9212019独角兽企业重金招聘Python工程师标准>>> ...css水平垂直居中方案最新发布m0_73351190的博客 187本篇文章介绍比较常见的三种方法。...的元素水平垂直居中的总结_绝对定位位水平垂直居中 transform...3-15DOCTYPEhtml>元素的垂直居中.elem1{position:relative;width:500px;height:500px;border:1px solid red; } .elem2{position:absolute;width:200px;height:200px;border:1px solid#9521de;left:50%;top:50%;transform:translate(-50%,-50%); } 效果如下: 不过transform是css3里面的内容,所以存在兼容性问题;IE9...实现div元素在整个屏幕的的垂直居中之translateY(-50%)的利用_tran...3-14本文介绍了如何使用CSS的transform: translateY(-50%)实现div元素在整个屏幕的垂直居中。通过设置position: absolute,top: 50%,right: 20px,再结合transform: translateY(-50%),即使元素高度不确定,也
03-19
具体来说，为了使一个子元素在其父容器内垂直居中，通常会结合绝对定位和 `translate(-50%, -50%)` 来完成这一目标。 以下是其实现机制的核心逻辑： - 首先，将子元素设置为相对于其最近的已定位祖先（即设置了 `...
CSS居中之 { left:50%； top:50%； transform:translate(-50%,-50%)； }
kfepiza的博客
03-04 2752
也可以写成:用 translate 的必须是块级元素, 或者absolute,fixed 才会生效比如 translate 在 relative+inline 时不会起作用left 和 top 在 position:relative,absolute,fixed 才会生效所以position不能是static;display不能是inline,relative+inline 时, left和top起作用, translate不起作用。
详解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...
transform: translateY(-50%)实现垂直居中效果
彭世瑜的博客
08-04 2879
<style> * { margin: 0; padding: 0; } .center { width: 960px; height: 500px; margin: 0 auto; background: #1879d9; } .center p { background: #fff; position: relative; top: 50%; left: 0; right: 0;
关于CSS中left:50%; top:50%; margin-left: -150px; margin-top: -75px;
qq_38454121的博客
12-06 1万+
#login_box { width: 300px; height: 150px; background: #eee; border: 1px solid #ccc; position: absolute; left:50%; top:50%; margin-left: -150px;
css中的“ transform: translate(-50%, -50%)； “的意思
qq_45207162的博客
06-14 7142
这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);
水平居中和transform: translateY(-50%) 实现元素垂直居中效果
diebaiying3731的博客
01-22 552
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style> * { margin: 0; paddi...
水平居中和transform: translateY(-50%) 实现元素垂直居中
xianengneng的博客
11-01 5446
垂直居中 垂直居中内容 原理 transform: translateY(-50%); 让div 沿Y轴平移自身高度的一半
top: 50%；left: 50%；transform: translate(-50%,-50%)实现浏览器中央效果
Love And Program的博客
05-08 1675
恰巧帮学姐写论文，想设个居中效果的时候用到了这个。 top: 50%; left: 50%;这猜也能猜出在他中心轴线上的右下部分吧，嘿嘿 transform: translate参考自己的位置来平移 最终效果 前提是Position都是按以相对于浏览器的位置所写的，也就是position:fixed;当然，其他形式下也可以，只要是相对浏览器位置即可，.外层没有position时可以使用position：absolute ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秀秀_heo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值