详解transform:translate(-50%,-50%)
·
这个其实就是一个位移的属性,translateX在x轴方向上进行移动,反之translateY则是在y轴方向,而translate括号里的两个参数是先x后y的。
这句话的应用场景是实现块居中,具体实现如下:
<style>
.outer {
width: 300px;
height: 300px;
position: relative;
background-color: rgb(75, 233, 27);
}
span {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="outer">
<span></span>
</div>
</body>
解释一下代码的作用:
1.首先外层盒子.outer设置了宽和高,因为是父级所以设置了相对定位,默认位置在左上角,并设置了背景色为绿色。
2.齐次是子元素span,将其绝对定位,给定宽高,并让其位置定位在画面中心的右下角(想象屏幕中间有一个十字,这个span就紧贴着第四象限),然后利用transform属性,将其往左平移span自身长度的50%,往上平移span自身长度的50%,这样中间的盒子就居中了。这一步都可以用浏览器的调试工具来自己调,动态看效果,很容易就可以明白
注意:绝对定位后,行内元素span变成了块级元素,可以设置宽和高
效果图如下:
其中,中间红色的就是span
21年12月20日补充:
要实现这样的块居中,学了flex之后,就不要这样了,麻烦。直接父盒子---->
display:flex;
align-item:center;
justify-content:center;
就可以实现块居中了。要是不明白为什么这样会块居中,自己到浏览器开发工具中,设置了flex的元素的标签上都会显示flex的标志,点一下,在样式中看,就可以通过选择的方式来设置flex布局,而不需要只在代码中写,然后刷新页面这样麻烦了。
只对新手说的,懂的人可能会觉得简单
更多推荐
已为社区贡献3条内容
所有评论(0)