transform - css3 translate 的水平垂直居中问题求解
问题描述
transform: translate(50%, 50%)
为什么能够使一个元素水平垂直居中?
问题解答
回答1:这样写并不能使一个元素水平垂直居中,只能使元素在当前位置分别往x轴和y轴正向平移自身宽度的一半距离。
之前答过一个题,楼主可以看一下,也许有一些帮助。
translate
回答2:<!DOCTYPE html><html lang='zh-CN'><head> <!--author:Vace_Vlm(ocdo@qq.com),create:2016年5月21日 下午10:45--> <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%);这时候是相对于这个元素本身向左移动一半,最终效果刚好是居中的。
相关文章:
1. 引用 node.js express加载 静态文件 报错 ??2. javascript - 引入 simditor,但是显示标签,这个怎么解决。3. 鼠标过导航标签时,无效果,请问如何查找问题4. android - 使用listview加载不同item,数据填充错误。5. node.js - 为什么引入mongoose报错?6. angular.js - ionic该如何强制刷新页面7. javascript - 数组的过滤和渲染8. node.js - 利用vue-cli 构建执行到npm run dev 报错,求解~9. 如何更新/删除指定的两条或多条数据10. 搭建一个用户间相互博弈的网站