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

最新推荐文章于 2025-06-02 09:41:00 发布

原创最新推荐文章于 2025-06-02 09:41:00 发布 · 421 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vuejs

当前文章被收录于：

vuejs

3 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了一种利用CSS3的transform属性实现元素水平垂直居中的方法，通过设置position:fixed; top:50%; left:50%; 和transform:translate(-50%,-50%);可以轻松实现如toast提示框等组件的居中显示。

transform:translate(-50%,-50%)是css3的新特性

在需要进行水平居中时，例如toast弹出居中。使用

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

来实现toast组件的水平居中。

标签

#vue.js #css

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HomebodyPro

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

合宙Air780EP速连OneNET：AT+MQTT应用指南

2401_82812461的博客

08-19

1360

本文详细讲解了合宙Air780EP使用AT指令通过MQTT接入OneNET的过程。

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

Open UI5 源代码解析之1349：NotABinding.js

最新发布

2007 年 ~ 2025 年，深耕 SAP 技术 18 年

06-02

1130

NotABinding.js 是 SAP OpenUI5 框架中一个用于设计时编辑器验证的模块文件，其主要功能是验证输入值是否为绑定表达式。该文件位于 sap.ui.integration 模块的设计时编辑器体系内，作为基础编辑器验证器的一部分。关键特性：采用同步验证方式（async: false），确保即时反馈复用底层绑定识别工具（isValidBindingString）返回标准验证器对象，包含错误消息键和验证函数核心逻辑是对绑定检测结果取反（!isValidBindingString）设计

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

qq_45207162的博客

06-14

7462

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

matlab 受约束的 Delaunay 三角剖分【2025最新版】

点云侠的博客

06-28

1843

matlab内置调用函数实现受约束的 Delaunay 三角剖分并将结果保存为STL文件

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

weixin_48181168的博客

07-10

452

translate()函数是css3的新特性. 在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。当使用：top:50%;left:50%;，是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50...

详解transform:translate(-50%,-50%)意思

yjg_773827531的专栏

10-31

2516

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

CSS学习笔记——transform:translate(-50%,-50%)实现水平垂直居中

Jane的博客

01-07

3151

参考： https://blog.csdn.net/qq_41083105/article/details/115233510 https://www.cnblogs.com/knuzy/p/9993181.html translate()的使用 translate() 函数是CSS3的新特性。在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。当使用下述样式，块是以左上角为原点，故不处于中心位置。 top: 50%; left: 50%; 而 translate(-50%,-50%) 作用是，往

transform:translate(-50%,-50%)水平垂直居中效果

vicky_yongqi的博客

12-02

5305

transform: translateY(-50%) 实现元素垂直居中效果 transform:translate(-50%,-50%)实现水平垂直居中通过position absolute和top 50%，结合transform产生效果。 eg.头部CSS排版 <style lang="stylus" rel="stylesheet/stylus"> .top_contai...

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

qq_44731369的博客

08-30

4706

translate(-50%,-50%) 实现效果：往上 (x轴)，左 (y轴)移动自身长宽的 50%，以使其居于中心位置。与使用margin实现居中不同的是，margin必须知道自身的宽高，而 translate 可以在不知道宽高的情况下进行居中，tranlate函数中的百分比是相对于自身宽高的百分比示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

transform:translate(-50%,-50%)的应用场景

bingot的博客

03-25

1万+

最近在封装一个弹窗我css的代码是这样写 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #fff; width: 300px; height: 150px; z-index: 12; border...

transform：translate(-50%，-50%)定位实现水平垂直居中

醉殇姒若梦遗年ツ的博客

08-01

1250

HTML代码 <div id="translateTest"></div> CSS代码 #translateTest{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:...

position & transform: translate(-50%, -50%) 实现块元素百分比下居中

PT - Blog

04-18

3万+

position & transform: translate(-50%, -50%) 实现块元素百分比下居中

【CSS3】变形--位移 translate()

热门推荐

O(∩_∩)O

02-24

4万+

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） 2、translateX(x)仅

详解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...

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

yueliangyefan的博客

06-27

7966

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

元素居中前端

qq_48254349的博客

11-26

299

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

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

ChangAnbaba的博客

07-23

1130

这是一次记录，一年前就已经学到transform，也知道transform(-50%,-50%)跟定位一起使用的时候可以有居中的效果。至于为什么会居中，那时候就懒了，想丢给以后。今天自己琢磨了一会才发现我脑子没转过来！蓝色阴影还没有top：50%，left：50%。为了更直观看出变化，又写多了一个div transform:translate(-50%,-50%) 意思：移动自己宽高的一半的距离，" - " 代表反方向。不亲手试下，靠自己想还真有点懵，思维不如人，那就做记录！ ...

CSS3笔记-2D转换

weixin_49455047的博客

11-22

507

CSS3笔记-2D转换

position & transform: translate(-50%, -50%) 实现块元素百分比的情况下居中

mini白的博客

08-03

4653

知识点： CSS3： transform: translate(-50%, -50%); 代码示例： HTML <body> <div class="wraper center"> <div class="inside center"></div> </div> </bod

CSS transform: translate(-50%,-50%)导致的像素模糊问题解决办法

Tycho‘s Blog

02-22

1万+

一、抛出问题 .modal-container { position: fixed; width: 100vw; height: 100vh; z-index: 999; } .modal { position: absolute; top: 50%; right: 50%; margin: auto; transf...

Python实现的植物识别项目源码及模型，支持4066种植物分类识别

基于Python实现的植物识别项目，支持4066种植物分类识别，包括属、种、亚种、变种等。使用方法：cd quarrying-plant-id，创建并激活conda环境，安装依赖库。内容来源于网络分享，如有侵权请联系我删除。