translate(-50%,-50%)实现居中

转载链接:http://www.imooc.com/qadetail/129282


<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进行布局/定位的缺点。

你可能感兴趣的:(translate(-50%,-50%)实现居中)