首页 > 其他分享 >绝对定位(absolute)居中问题:transform: translate(-50%);

绝对定位(absolute)居中问题:transform: translate(-50%);

时间:2024-05-14 15:33:11浏览次数:18  
标签:居中 50% transform position translate absolute

 transform: translate(-50%);

 

translate(50%) 相当于 translateX(50%),表示沿X轴方向平移元素自身宽度的50%。

 

绝对定位是最常见的问题是难以居中,所以可以改变元素的中心,来达到居中的效果

position: absolute;
    left: 50%;
    transform: translate(-50%);

 

ex

position: absolute;
    left: 50%;
    z-index: 2;
    transform: translate(-50%);
    top: 28px;
    background-color: #000000b3;
    display: flex;
    align-items: center;
    border-radius: 5px;
    height: 35px;
    width: 400px;

 

标签:居中,50%,transform,position,translate,absolute
From: https://www.cnblogs.com/Simoon/p/18191390

相关文章

  • KBPC5010-ASEMI电源控制柜专用KBPC5010
    编辑:llKBPC5010-ASEMI电源控制柜专用KBPC5010型号:KBPC5010品牌:ASEMI封装:KBPC-4正向电流(Id):50A反向耐压(VRRM):1000V正向浪涌电流:400A正向电压(VF):1.00V引脚数量:4芯片个数:4芯片尺寸:88MIL功率(Pd):大功率设备工作温度:-55°C~150°C类型:整流桥、插件整流桥KBPC5010整流桥描述......
  • 万事通,专精部分领域的多功能 Transformer 智能体
    介绍我们很高兴分享“万事通”(JackofAllTrades,简称JAT)项目,该项目旨在朝着通用智能体的方向发展。该项目最初是作为对Gato(Reed等,2022年)工作的公开复现启动的,Gato提出训练一种能够执行视觉与语言以及决策任务的Transformer。于是我们首先构建了Gato数据集的开放......
  • 1250 - Table 'd' from one of the SELECTs cannot be used in field list
    1问题描述sql数据库查询接口union后orderby某字段,提示错误“1250-Table'd'fromoneoftheSELECTscannotbeusedinfieldlist“。移除orderby条件,就不会报错,但是不满足按照某个字段排序。 2方案解决修改排序条件为:orderbystatId即可。(union后的结果是字段......
  • 定制聚四氟乙烯大圆桶50L
    PTFE聚四氟乙烯圆桶是高性能化学实验器皿,适用于强酸强碱环境。具有化学稳定性、耐高温、良好密封、易清洗、环保安全等特点。常规四氟桶-超大规格四氟桶均可定制,一体成型,保证密封,可长期保存高纯试剂。产品特性1.超纯实验级聚四氟乙烯材质加工;2.耐高低温,-200℃~+250℃;3.耐腐......
  • Transformers 加速的一些常用技巧
    Transformers是一个强大的架构,但模型因其采用的自注意力机制,虽然能够有效地处理序列数据并捕获长距离依赖关系,但同时也容易导致在训练过程中出现OOM(OutofMemory,内存不足)或者达到GPU的运行时限制。主要是因为参数数量庞大:Transformer模型通常包含大量的参数,尤其是在模型层面......
  • Python 潮流周刊#50:我最喜欢的 Python 3.13 新特性!
    本周刊由Python猫出品,精心筛选国内外的250+信息源,为你挑选最值得分享的文章、教程、开源项目、软件工具、播客和视频、热门话题等内容。愿景:帮助所有读者精进Python技术,并增长职业和副业的收入。本期分享了12篇文章,11个开源项目,2则音视频,赠书5本《黑客与画家(10万册纪......
  • 经典译文:Transformer--Attention Is All You Need
    经典译文:Transformer--AttentionIsAllYouNeed来源  https://zhuanlan.zhihu.com/p/689083488 本文为Transformer经典论文《AttentionIsAllYouNeed》的中文翻译:https://arxiv.org/pdf/1706.03762.pdf注意力满足一切[email protected]......
  • 450. 删除二叉搜索树中的节点(leetcode)
    https://leetcode.cn/problems/delete-node-in-a-bst/要点是确定函数语义,单层递归逻辑,确定好有返回值的这种写法,分析出5种情况,递归的时候接收好递归的返回的新树的根节点即可classSolution{//函数语义(单层递归逻辑):查找要删除的节点,并且返回删除节点后新的树的......
  • 爆爽,英语小白怒刷 50 课!像玩游戏一样学习英语~
    ###重点!!!(先看这)1.清楚自己学英语的`目的`,先搞清楚目标,再行动2.自身现在最需要的东西:`词汇量`?`口语`?还是`阅读能力`?3.找对应的书籍,学习资料4.往`兴趣靠拢`:网上有大量的推荐美剧学习、小说学习,不要被他们迷了眼,适合他们的不一定适合你,找到适合的你才能长期坚持下......
  • P3350 [ZJOI2016] 旅行者
    P3350[ZJOI2016]旅行者分治+最短路网格图可以想到分治。每次将长边分为两半,处理越过中线的询问。那么就可以枚举中线上的每个点更新答案,经过\(x\)的路径更新\((u,v)\)就是\(dis_{u,x}+dis_{x,v}\)。每次预处理中线上每个点的单源最短路即可。设\(S=nm\),复杂度\(O(S\sq......