translate(-50%,-50%)实现居中
来源：互联网 发布：龙腾世纪2 知乎 编辑：程序博客网 时间：2024/05/01 20:16
转载链接：http://www.imooc.com/qadetail/129282
<!--html--><body><div>这是用来测试的</div></body>/*CSS*/div{position:absolute;top:50%;left:50%; /*如果把这几行删掉，不可以居中 */border-radius: 5px;-webkit-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); transform:translate( -50%, -50%); }translate(x,y) 括号的百分比数据，会以本身的长宽做参考，比如，本身的长为100px，高为100px. 那填(50%,50%)就是向右，向下移动50px，添加负号就是向着相反的方向移动
如果设置了
position:absolute;top:50%那DIV的左边边框会移动到父级（上面的代码中，DIV的父级就是body）的中央，而不是你的DIV的中心与body的中心重合。
引申出新问题：采用absolute进行布局/定位的缺点。
阅读全文
0 0
- translate(-50%,-50%)实现居中
- translate+position实现居中
- position & transform: translate(-50%, -50%) 实现块元素百分比下居中
- 元素水平垂直居中【弹性布局 || Translate】
- 利用translate()进行水平垂直居中
- translate 的50%是相对于自己的
- 水平居中和transform: translateY(-50%) 实现元素垂直居中效果
- transform: translateY(-50%) 实现元素垂直居中效果
- pygtk+glade实现google translate
- css3 translate实现表头固定
- translate
- translate
- translate
- translate
- translate
- translate
- translate
- translate
- angularjs官方教程中的两处错误
- VPN实例：VRF虚拟路由器使用
- 计算并输出1+2+3+..............+n的值
- 一个初级运维工程师对于运维工作的一些浅显认知
- python打印表格技巧
- translate(-50%,-50%)实现居中
- Windows Server 2008 R2 ent 搭建FTP服务
- 腾讯地图计算距离 循环赋值
- 三周第五次课 2017.11.03 磁盘格式化、磁盘挂载、手动增加swap空间
- HTML学习05-超链接
- trafodion权限管理——安装配置IPA Server replication
- IDEA Error parsing SQL Mapper Configuration. Cause: java.io.IOException: Could not find resource ***
- PV,VG,LV的关系和操作
- 2017.11.3测试
