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. 数字替换(DFS 剪枝优化)一、问题二、思路三、代码一、问题 二、思路 题目中要求变换次数最小,其实第一印象应该是贪心,即我们每一次都去成各位中最大的那个数字。但是这个想法很容易推翻。因为你这次乘了一个最大的…...
【教学典型案例】01.redis只管存不管删除让失效时间删除的问题
目录一:背景介绍二:redis1)redis数据类型①String(字符串)②Hash(哈希)③List(列表)④Set(集合)2)缓存同步①设置有效期②同步双写③异步通知3&am…...
电话号码管理
电话号码管理 文章目录 电话号码管理综述链表结构initcreatedeleteallfreeANSI颜色转义颜色列表如下:字背景颜色范围:40--49 字颜色: 30--39输出特效格式控制:光标位置等的格式控制:Makefile顶层Makefilescripts Makefilesearch main init include display delete create all…...
Shell 教程
Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。Shell 既是一种命令语言,又是一种程序设计语言。 Shell 是指一种应用程序,这个应用程序提供了一个界面,用户通过这个界面访问操作系统内核的服务。 Ken Thompson 的…...
Shader 阴影
阴影生成原理 以平行光为例,把相机移动到光源位置,计算阴影映射纹理(shadowmap),这张shadowmap本质上是一张深度图,它记录了从该光源的位置出发、能看到的场景中距离它最近的表面位置(深度信息&…...
【冲刺蓝桥杯的最后30天】day2
大家好😃,我是想要慢慢变得优秀的向阳🌞同学👨💻,断更了整整一年,又开始恢复CSDN更新,从今天开始更新备战蓝桥30天系列,一共30天,如果对你有帮助或者正在备…...
docker系列1:docker安装
传送门 docker官网地址: Docker: Accelerated, Containerized Application Development 安装地址:Install Docker Engine docker hub地址 docker hub:Docker 安装步骤 前置条件 由于安装docker,需要根据操作系统版本选择…...
内核角度谈谈Linux进程和线程
目录前言内核对进程和线程的表示创建进程的过程创建线程的过程创建进程和线程的异同揭秘 do_fork 系统调用结论前言 昨天面试的时候,面试官问我了个平平淡淡的问题–>“聊聊Linux中进程和线程”; 相比大家不管是在考试还是面试中或多或少都遇到过这个问题&…...
【mmdeploy部署系列】使用Tensorrt加速部署mmpose人体姿态库
【mmdeploy部署系列】使用Tensorrt加速部署mmpose人体姿态库0.引言1.安装mmcv2.使用mmpose(1)安装mmpose(2)运行mmpose3.使用mmdeploy(1)安装ppl.cv(2)编译安装mmdeploy(…...
IDEA 每次新建工程都要重新配置 Maven 解决方案
IDEA 每次新建工程都要重新配置 Maven 解决方案 IDEA 每次新建工程都要重新配置 Maven,是一件相当浪费时间的事情。这是因为在创建一个项目后,在 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什么是权限 首先来看一个例子:比如说我没有爱奇艺的vip,那么我也就没有…...
Unity记录2.1-动作-多段跳、蹬墙跳、墙体滑落
文章首发及后续更新:https://mwhls.top/4450.html,无图/无目录/格式错误/更多相关请至首发页查看。 新的更新内容请到mwhls.top查看。 欢迎提出任何疑问及批评,非常感谢! 汇总:Unity 记录 摘要:实现跳跃、蹬…...
Spring Boot结合IDEA自带Maven插件快速切换profile | Spring Cloud 10
一、前言 IDEA是目前 Java 开发者中使用最多的开发工具,它有着简约的设计风格,强大的集成工具,便利的快捷键。 在项目项目整个开发运维周期中,我们的的项目往往需要根据不同的环境,使用不同的文件配置。 比如以下部…...
ES 7.7.0 数据迁移
本文使用 elasticdump 做数据迁移,支持在线和离线俩种方式,适用于数据量比较小的情况。 1、Node 安装 由于elasticdump 依赖于 node,首先需要安装下node。 1.1、 Linux 安装 $ wget https://nodejs.org/dist/v10.15.0/node-v10.15.0-linu…...
【玩转c++】vector讲解和模拟底层实现
本期主题:vector的讲解和模拟实现博客主页:小峰同学分享小编的在Linux中学习到的知识和遇到的问题小编的能力有限,出现错误希望大家不吝赐vector的介绍及使用1.1vector的介绍vector其实就是一个数组的模板 ,存放的数据可以改变而已…...
基本类型、包装类型、引用类型、String等作为实参传递后值会不会改变?
看了半天帖子,讲得乱七八糟,坑死了 [1] 先说结论 基本类型、包装类型、String类型作为参数传递之后,在方法里面修改他们的值,原值不会改变!引用类型不一定,要看是怎么修改它的。 [2] 为什么基本类型、包装类…...
Tomcat服务器配置以及问题解决方案
文章目录01 Tomcat简介02 Tomcat的安装03 Tomcat的使用启动Tomcat服务器 (解决一闪而过)测试 Tomcat 是否启动Tomcat 服务器的关闭04 Tomcat的配置配置端口控制台配置(乱码解决)部署工程到Tomcat中01 Tomcat简介 Tomcat是一款开源…...
【Node.js】HTTP协议、HTTP的请求报文和响应报文
HTTP协议、HTTP的请求报文和响应报文HTTP协议HTTP主要特点HTTP的请求报文和响应报文请求报文请求行请求消息头空行请求体响应报文响应状态行响应消息头空行响应体总结HTTP协议 HTTP 全称为超文本传输协议,是用于从WWW服务器传输超文本到本地浏览器的传送协议&#…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
Linux 中如何提取压缩文件 ?
Linux 是一种流行的开源操作系统,它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间,使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的,要在 …...
计算机基础知识解析:从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域:无处不在的数字助手 2、 计算机的进化史:从算盘到量子计算 3、计算机的分类:不止 “台式机和笔记本” 4、计算机的组件:硬件与软件的协同 4.1 硬件:五大核心部件 4.2 软件&#…...
