CSS3记录 -transform(-50%,-50%)为什么会跟定位一起使用,会有居中的作用!

最新推荐文章于 2024-05-17 02:02:01 发布

前端猪

最新推荐文章于 2024-05-17 02:02:01 发布

阅读量1k

点赞数 1

分类专栏：记录文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/ChangAnbaba/article/details/107537993

版权

记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一次记录，一年前就已经学到transform，也知道transform(-50%,-50%)跟定位一起使用的时候可以有居中的效果。至于为什么会居中，那时候就懒了，想丢给以后。今天自己琢磨了一会才发现我脑子没转过来！

在这里插入图片描述
蓝色阴影还没有top：50%，left：50%。

在这里插入图片描述

为了更直观看出变化，又写多了一个div
transform:translate(-50%,-50%) 意思：移动自己宽高的一半的距离，" - " 代表反方向。

不亲手试下，靠自己想还真有点懵，思维不如人，那就做记录！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端猪

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS中的translate(-50%,-50%)实现水平垂直居中效果

01-21

(使用top和left为50%时，以窗口左上角为原点)。示例： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, ini

css3的transform属性

weixin_43353035的博客

03-10

244

translate移动 1、2d的移动 2、3d的移动 3、使用 translate 移动的优点：不会影响其它盒子，但是对行内元素不起作用 // 常用知识点 // transform: translate(50%, 50%); 百分比是相对与自身的 // 设置盒子水平居中，垂直居中 <style> .father { position: relative; } .child { position: absolute; left: 50%; top: 50%; t

参与评论您还未登录，请先登录后发表或查看评论

transform(-50%,-50%)+绝对定位实现块元素页面居中

always_die0的博客

08-18

498

https://www.cnblogs.com/knuzy/p/9993181.html 转载并记录一下自己的分析：当使用：top: 50%;left: 50%;，是以左上角为原点，进行移动。如果移动的是一个块级元素，那么结果就是块级元素的左顶点位于整个页面的top: 50%;left: 50%的位置，所以只要加上==transform(-50%,-50%)==就能让块级元素的中心点移动到左顶点的位置，从而实现真正的居中状态 ...

css中的“ transform: translate(-50%, -50%)； “的意思

qq_45207162的博客

06-14

6417

这种特定的用法（translate(-50%, -50%)）经常和 position: absolute;这里的原理是，首先通过 top: 50%;将元素的左上角移到其容器的中心，然后再通过 translate(-50%, -50%) 向左和向上移动元素的一半宽度和一半高度，以此达到完全居中的效果。在 translate(-50%, -50%) 中，元素将在水平和垂直方向上各自移动其自身宽度或高度的50%的距离。在CSS中，transform: translate(-50%, -50%);

CSS 动画过渡

jasonjkj的博客

09-18

662

CSS 3 高级 1.转换（3D ，2D）转换的简介，转换即变形 1.转换属性 transform:none(默认值) /‘transform-function(转换函数)’ 空格来分割多个转换函数（transform-function()） 2.转换原点（默认中心点）属性:transform-origin: 取值:按照元素左上点为(0,0) 可以给px 或者百分比或者关

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

nuanpang的博客

07-25

447

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

CSS居中效果之transform的使用

09-25

3. **与其他`transform`样式冲突**：如果元素上还有其他`transform`属性，它们会与`translate(-50%, -50%)`一起应用。这可能会改变元素的最终位置，因此需要确保`translate(-50%, -50%)`是最后应用的`transform`。 ...

CSS居中大礼包

01-08

**CSS居中大礼包** 水平居中行内元素&行内块元素：看父元素是不是...使用定位元素，父元素是相对定位，子元素(假如宽度是100px)是绝对定位子元素设置 left:50%; margin-left:-50px; 或者transform:translateX(-50

div垂直居中-CSS元素垂直居中方法的探究

06-11

一种是使用绝对定位，设置`position: absolute`，然后配合`top: 50%`和`transform: translateY(-50%)`，元素会相对于其父元素的顶部偏移自身高度的一半，达到垂直居中效果。这种方法需要父元素设置`position: ...

transform:translate (-50%,-50%) 造成的文字模糊和解决方案

豆之助

04-17

1万+

首先先上图，图片为工作项目图片，为了避嫌，打了个码。如图所示，为了让文字在一个div中水平垂直都居中显示，用absolute定位和transform将文字放在了一个div的中间位置，此时字号并不小，但字体边缘模糊。这是因为transform时div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。解决方案是使用flex

HTML5CSS3_day02

weixin_37128962的博客

05-13

169

day02 - 移动web开发_H5C3 1.1. 2D转换（变换）transform 2d转换是改变标签在2维平面上的位置和形状的一种技术，先来学习2维坐标系 1.1.1. 2维坐标系 2维坐标系其实就是指布局的时候的坐标系如图 1.1.2. 2d移动 translate 2d移动是2d转换里面的一种功能，可以改变元素在页面中的位置，类似定位使用2d移动的步骤：给元素添加转换属性 ...

个人笔记_前端_css-transform:translate(-50%,-50%)实现不知自身宽高下的水平居中

HomebodyPro的博客

06-11

346

transform:translate(-50%,-50%)是css3的新特性在需要进行水平居中时，例如toast弹出居中。使用 position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);

CSS3笔记-2D转换

weixin_49455047的博客

11-22

412

CSS3笔记-2D转换

前端基础知识第八章---CSS

热门推荐

qq_41083105的博客

03-26

3万+

关于transform:translate(-50%,-50%) 这个其实就是一个位移的属性，translatex在x轴方向上进行移动，反之translatey实在y轴方向，而translate括号里的两个参数是先x后y的。这句话的应用场景是实现块居中，具体实现如下： <style> .outer { width: 300px; height: 300px; posit...

CSS 面试题

当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。

08-15

1927

1. display: none; 与visibility: hidden; 的区别 display:none 不会占空间 visibility 继续占据空间，只是内容不可见通过设置 visibility: visible;可以让子孙节点显式 2. hack 原理及常用原理：利用不同浏览器对 CSS 的支持和解析结果不一样编写针对特定浏览器样式比如火狐不识别*background:red; 星号 3. link 与 @import 的区别 link 是 HTML

元素居中前端

qq_48254349的博客

11-26

224

<!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

CSS01_transform: translate(-50%,-50%)

linxwx的博客

02-22

463

问题：当使用 top: 50%；left: 50% 时，元素并不在中心，而是偏右下一点代码： .center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /*-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持*/ -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50

21、前端开发：CSS知识总结——transform变形属性

不迁怒，不贰过。小知识，大智慧。

08-28

1201

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。可以改变元素的形状或位置，不会影响到页面的布局。

transform: translate(-50%, -50%);是什么意思

06-06

`transform: translate(-50%, -50%);` 是一种 CSS3 中的变形属性，作用是通过平移元素的位置，来实现元素的定位和布局。具体来说，`translate(-50%, -50%)` 表示将元素自身的宽度和高度的一半分别向左和向上平移，使得元素的中心点与其父元素的中心点重合，从而实现元素在父元素中的居中对齐。其中，`translate()` 是一个函数，后面的参数 `-50%` 表示平移的距离，其中负号表示向左和向上平移，50% 表示平移的距离为元素自身宽度或高度的一半。因此，`translate(-50%, -50%)` 表示将元素自身的中心点平移到其父元素的中心点位置，从而实现居中对齐。