文章详情页

transform - css3 translate 的水平垂直居中问题求解

浏览：223日期：2023-07-11 17:37:45

问题描述

transform: translate(50%, 50%)

为什么能够使一个元素水平垂直居中？

问题解答

回答1：

这样写并不能使一个元素水平垂直居中，只能使元素在当前位置分别往x轴和y轴正向平移自身宽度的一半距离。

之前答过一个题，楼主可以看一下，也许有一些帮助。

translate

回答2：

<!DOCTYPE html><html lang='zh-CN'><head>  <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' /> <title>title</title> <style>*{ padding: 0;margin: 0;}html,body{ width:100%; height:100%;}.box{ position:relative; top:50%; left:50%; width:200px; height:200px; background:red; transform:translate(-50%,-50%); transform-origin:50% 50%;} </style></head><body> <p class='box'></p></body></html>回答3：

这样写并不能直接居中，可以定位，然后left:50%; 这个时候定位原点是父层的定位元素，然后使用translateX(-50%)；这时候是相对于这个元素本身向左移动一半，最终效果刚好是居中的。

CSS

上一条：html - 关于图片使用scale放大过程中，父元素overflow:hidden失效的问题下一条：html - 谁能解释这个现象？？

相关文章：

1. javascript - Vue启动时弹出错误 Failed to compile with 1 errors2. mysql 字段索引的问题3. 静态资源文件引入无效4. javascript - UI样式计算过多导致浏览器加载过慢，IE尤其严重，求前辈指导5. javascript - hammer.js panend 怎么区分是panleft 结束还是panright结束的?6. javascript - <div onclick="fun()"></div>这种fun函数只有写成全局函数才有效吗？7. css3:flex排版问题8. javascript - 怎么才能有效的防止网页被盗？9. javascript - htaccess rewrite 的问题10. javascript - jQuery 获取表格所有数据

排行榜

					
					javascript - Vue启动时弹出错误 Failed to compile with 1 errors
静态资源文件引入无效
mysql 字段索引的问题
在Java的单独一行中指定的URL不会发出编译时错误。为什么？
javascript - <div onclick="fun()"></div>这种fun函数只有写成全局函数才有效吗？
javascript - UI样式计算过多导致浏览器加载过慢，IE尤其严重，求前辈指导
javascript - jQuery 获取表格所有数据
android - java 泛型不支持数组，那么RxJava的Map集合有什么方便的手段可以定义获得一串共同父类集合数据呢？
javascript - 怎么才能有效的防止网页被盗？
javascript - webpack 多入口文件生成HTML文件；
Java 中各种空（""、u0000、null）的区别？
				

热门标签