当前位置: 首页 > news >正文

CSS居中之 { left:50%; top:50%; transform:translate(-50%,-50%); }

CSS居中之 { left:50%; top:50%; transform:translate(-50%,-50%); }

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

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

也可以写成: left:50%; top:50%; translate: -50% -50%;

left:50%; top:50%; translate: -50% -50%;
  • 用 translate 的必须是块级元素, 或者absolute,fixed 才会生效
    比如 translate 在 relative+inline 时不会起作用

  • left 和 top 在 position:relative,absolute,fixed 才会生效

所以position不能是static ; display不能是inline,

  • relative+inline 时, left和top起作用, translate不起作用

  • relative+block 时, relative使得left和top起效 , block使得translate起效



方法1: 不用设置父元素, 被居中元素 position:relative, 必须是块元素[ block | inline-block | flex | inline-flex | grid | inline-grid | table | inline-table | …等块级元素 ] , 不能是 inline
.被居中元素{position:relative; display:block; left:50%; top:50%; transform:translate(-50%,-50%);}
.被居中元素{position:relative; display:inline-block; left:50%; top:50%; transform:translate(-50%,-50%);}
.被居中元素{position:relative; display:grid; left:50%; top:50%; transform:translate(-50%,-50%);}
.被居中元素{position:relative; display:inline-grid; left:50%; top:50%; transform:translate(-50%,-50%);}
.被居中元素{position:relative; display:flex; left:50%; top:50%; transform:translate(-50%,-50%);}
.被居中元素{position:relative; display:inline-flex; left:50%; top:50%; transform:translate(-50%,-50%);}
.被居中元素{position:relative; display:table; left:50%; top:50%; transform:translate(-50%,-50%);}
.被居中元素{position:relative; display:inline-table; left:50%; top:50%; transform:translate(-50%,-50%);}



方法2: 父元素设置position:< relative | absolute | fixed> , 被居中元素position:absolute或fixed, 不能是relative , 可以不用设置display
.父元素{position:relative;}
.被居中元素{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.父元素{position:absolute;}
.被居中元素{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.父元素{position:fixed;}
.被居中元素{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.父元素{position:relative;}
.被居中元素{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);}
.父元素{position:absolute;}
.被居中元素{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);}
.父元素{position:fixed;}
.被居中元素{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);}



transform:translate(-50%,-50%) 可以写成 translate -50% -50%
.被居中元素{position:relative; display:block; left:50%; top:50%; translate -50% -50%;}
.父元素{position:relative;}
.被居中元素{position:absolute; left:50%; top:50%; translate -50% -50%;}



例子
<div id="B" style="width: 800px; display: grid; grid: auto / 10fr 10fr"><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">不居中</span></div><label>父元素::<br />子元素:: position:relative;</label><divclass="居中容器"style="position: relative;border: 1px solid black;width: 100%;height: 200px;"><spanclass="居中元素"style="position: absolute;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::position:relative;<br />子元素:: position:absolute;</label><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;display: block;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::<br />子元素:: position:relative; display:block</label><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;display: inline-block;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::<br />子元素:: position:relative; display:inline-block</label><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;display: flex;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::<br />子元素:: position:relative; display:flex</label><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;display: inline-flex;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::<br />子元素:: position:relative; display:inline-flex</label><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;display: grid;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::<br />子元素:: position:relative; display:grid</label><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;display: inline-grid;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::<br />子元素:: position:relative; display:inline-grid</label><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;display: table;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::<br />子元素:: position:relative; display:table</label><divclass="居中容器"style="border: 1px solid black; width: 100%; height: 200px"><spanclass="居中元素"style="position: relative;display: inline-table;left: 50%;top: 50%;translate: -50% -50%;width: 200px;height: 100px;font-size: 66px;border: 1px solid red;text-align: center;">居中</span></div><label>父元素::<br />子元素:: position:relative; display:inline-table</label>
</div>

在这里插入图片描述

相关文章:

CSS居中之 { left:50%; top:50%; transform:translate(-50%,-50%); }

CSS居中之 { left:50%; top:50%; transform:translate(-50%,-50%); } left:50%; top:50%; transform:translate(-50%,-50%); left:50%; top:50%; transform:translate(-50%,-50%);也可以写成: left:50%; top:50%; translate: -50% -50%; left:50%; top:50%; translate: -50%…...

AcWing 4868. 数字替换(DFS + 剪枝优化)

AcWing 4868. 数字替换&#xff08;DFS 剪枝优化&#xff09;一、问题二、思路三、代码一、问题 二、思路 题目中要求变换次数最小&#xff0c;其实第一印象应该是贪心&#xff0c;即我们每一次都去成各位中最大的那个数字。但是这个想法很容易推翻。因为你这次乘了一个最大的…...

【教学典型案例】01.redis只管存不管删除让失效时间删除的问题

目录一&#xff1a;背景介绍二&#xff1a;redis1&#xff09;redis数据类型①String&#xff08;字符串&#xff09;②Hash&#xff08;哈希&#xff09;③List&#xff08;列表&#xff09;④Set&#xff08;集合&#xff09;2)缓存同步①设置有效期②同步双写③异步通知3&am…...

电话号码管理

电话号码管理 文章目录 电话号码管理综述链表结构initcreatedeleteallfreeANSI颜色转义颜色列表如下:字背景颜色范围:40--49 字颜色: 30--39输出特效格式控制:光标位置等的格式控制:Makefile顶层Makefilescripts Makefilesearch main init include display delete create all…...

Shell 教程

Shell 是一个用 C 语言编写的程序&#xff0c;它是用户使用 Linux 的桥梁。Shell 既是一种命令语言&#xff0c;又是一种程序设计语言。 Shell 是指一种应用程序&#xff0c;这个应用程序提供了一个界面&#xff0c;用户通过这个界面访问操作系统内核的服务。 Ken Thompson 的…...

Shader 阴影

阴影生成原理 以平行光为例&#xff0c;把相机移动到光源位置&#xff0c;计算阴影映射纹理&#xff08;shadowmap&#xff09;&#xff0c;这张shadowmap本质上是一张深度图&#xff0c;它记录了从该光源的位置出发、能看到的场景中距离它最近的表面位置&#xff08;深度信息&…...

【冲刺蓝桥杯的最后30天】day2

大家好&#x1f603;&#xff0c;我是想要慢慢变得优秀的向阳&#x1f31e;同学&#x1f468;‍&#x1f4bb;&#xff0c;断更了整整一年&#xff0c;又开始恢复CSDN更新&#xff0c;从今天开始更新备战蓝桥30天系列&#xff0c;一共30天&#xff0c;如果对你有帮助或者正在备…...

docker系列1:docker安装

传送门 docker官网地址&#xff1a; Docker: Accelerated, Containerized Application Development 安装地址&#xff1a;Install Docker Engine docker hub地址 docker hub&#xff1a;Docker 安装步骤 前置条件 由于安装docker&#xff0c;需要根据操作系统版本选择…...

内核角度谈谈Linux进程和线程

目录前言内核对进程和线程的表示创建进程的过程创建线程的过程创建进程和线程的异同揭秘 do_fork 系统调用结论前言 昨天面试的时候&#xff0c;面试官问我了个平平淡淡的问题–>“聊聊Linux中进程和线程”; 相比大家不管是在考试还是面试中或多或少都遇到过这个问题&…...

【mmdeploy部署系列】使用Tensorrt加速部署mmpose人体姿态库

【mmdeploy部署系列】使用Tensorrt加速部署mmpose人体姿态库0.引言1.安装mmcv2.使用mmpose&#xff08;1&#xff09;安装mmpose&#xff08;2&#xff09;运行mmpose3.使用mmdeploy&#xff08;1&#xff09;安装ppl.cv&#xff08;2&#xff09;编译安装mmdeploy&#xff08;…...

IDEA 每次新建工程都要重新配置 Maven 解决方案

IDEA 每次新建工程都要重新配置 Maven 解决方案 IDEA 每次新建工程都要重新配置 Maven&#xff0c;是一件相当浪费时间的事情。这是因为在创建一个项目后&#xff0c;在 File -> Settings -> Build,Execution,Deployment -> Build Tools -> Maven下配置了 Maven h…...

【C++修炼之路】25.哈希应用--布隆过滤器

每一个不曾起舞的日子都是对生命的辜负 布隆过滤器前言一.布隆过滤器提出二.布隆过滤器概念三. 布隆过滤器的操作3.1 布隆过滤器的插入3.2 布隆过滤器的查找3.3 布隆过滤器的删除四.布隆过滤器的代码4.1 HashFunc的仿函数参考4.2 BloomFilter.h五.布隆过滤器的优缺点六.布隆过滤…...

linux入门---权限

目录标题什么是权限人的分类为什么会有所属组查看文件属性文件的分类如何查看权限文件不同权限的表现rwx权限修改八进制权限修改umask有关内容文件中人的修改目录不同权限的表现rwx什么是权限 首先来看一个例子&#xff1a;比如说我没有爱奇艺的vip&#xff0c;那么我也就没有…...

Unity记录2.1-动作-多段跳、蹬墙跳、墙体滑落

文章首发及后续更新&#xff1a;https://mwhls.top/4450.html&#xff0c;无图/无目录/格式错误/更多相关请至首发页查看。 新的更新内容请到mwhls.top查看。 欢迎提出任何疑问及批评&#xff0c;非常感谢&#xff01; 汇总&#xff1a;Unity 记录 摘要&#xff1a;实现跳跃、蹬…...

Spring Boot结合IDEA自带Maven插件快速切换profile | Spring Cloud 10

一、前言 IDEA是目前 Java 开发者中使用最多的开发工具&#xff0c;它有着简约的设计风格&#xff0c;强大的集成工具&#xff0c;便利的快捷键。 在项目项目整个开发运维周期中&#xff0c;我们的的项目往往需要根据不同的环境&#xff0c;使用不同的文件配置。 比如以下部…...

ES 7.7.0 数据迁移

本文使用 elasticdump 做数据迁移&#xff0c;支持在线和离线俩种方式&#xff0c;适用于数据量比较小的情况。 1、Node 安装 由于elasticdump 依赖于 node&#xff0c;首先需要安装下node。 1.1、 Linux 安装 $ wget https://nodejs.org/dist/v10.15.0/node-v10.15.0-linu…...

【玩转c++】vector讲解和模拟底层实现

本期主题&#xff1a;vector的讲解和模拟实现博客主页&#xff1a;小峰同学分享小编的在Linux中学习到的知识和遇到的问题小编的能力有限&#xff0c;出现错误希望大家不吝赐vector的介绍及使用1.1vector的介绍vector其实就是一个数组的模板 &#xff0c;存放的数据可以改变而已…...

基本类型、包装类型、引用类型、String等作为实参传递后值会不会改变?

看了半天帖子&#xff0c;讲得乱七八糟&#xff0c;坑死了 [1] 先说结论 基本类型、包装类型、String类型作为参数传递之后&#xff0c;在方法里面修改他们的值&#xff0c;原值不会改变&#xff01;引用类型不一定&#xff0c;要看是怎么修改它的。 [2] 为什么基本类型、包装类…...

Tomcat服务器配置以及问题解决方案

文章目录01 Tomcat简介02 Tomcat的安装03 Tomcat的使用启动Tomcat服务器 &#xff08;解决一闪而过&#xff09;测试 Tomcat 是否启动Tomcat 服务器的关闭04 Tomcat的配置配置端口控制台配置&#xff08;乱码解决&#xff09;部署工程到Tomcat中01 Tomcat简介 Tomcat是一款开源…...

【Node.js】HTTP协议、HTTP的请求报文和响应报文

HTTP协议、HTTP的请求报文和响应报文HTTP协议HTTP主要特点HTTP的请求报文和响应报文请求报文请求行请求消息头空行请求体响应报文响应状态行响应消息头空行响应体总结HTTP协议 HTTP 全称为超文本传输协议&#xff0c;是用于从WWW服务器传输超文本到本地浏览器的传送协议&#…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

HarmonyOS运动开发:如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

macOS 终端智能代理检测

&#x1f9e0; 终端智能代理检测&#xff1a;自动判断是否需要设置代理访问 GitHub 在开发中&#xff0c;使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新&#xff0c;例如&#xff1a; fatal: unable to access https://github.com/ohmyzsh/oh…...