视频
演练 translate 百分比位移的功效 css 1002www.ixigua.com测试,位移百分比参数的情况
水平50%
![d80429d25cc5a3fc463e65aba46da005.png](https://img-blog.csdnimg.cn/img_convert/d80429d25cc5a3fc463e65aba46da005.png)
位移的距离是自身的50%,
利用位移实现,盒子的定位
先让盒子向左偏移一半试一试
![df2fcaba5608aab8ba3e318eab66601d.png](https://img-blog.csdnimg.cn/img_convert/df2fcaba5608aab8ba3e318eab66601d.png)
只设置x的位移,可以不给第二个参数
利用百分比偏移的特性(会根据自己的宽高进行偏移),我们可实现
让盒子位于父级,水平,垂直,居中对齐
思路:
让目标盒子绝对定位
为方便演示,只要一个盒子
初始状态
![4cfec4d8ee475307dc3ed9339d471715.png](https://img-blog.csdnimg.cn/img_convert/4cfec4d8ee475307dc3ed9339d471715.png)
定位,并且水平偏移
![d212e98ee71cc2e592a7a72a09d83965.png](https://img-blog.csdnimg.cn/img_convert/d212e98ee71cc2e592a7a72a09d83965.png)
定位,让盒子垂直方向居中对齐
代码
![e456c954c8015bad9efc492175cca4e6.png](https://img-blog.csdnimg.cn/img_convert/e456c954c8015bad9efc492175cca4e6.png)
最终效果
![a1eead8fa4c50c12f867c13286abaaeb.png](https://img-blog.csdnimg.cn/img_convert/a1eead8fa4c50c12f867c13286abaaeb.png)
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one {
width: 100px;
height: 100px;
background-color: #ff0000;
/*transform: translate(-50%);*/
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="one">是</div>
</body>
</html>