需求描述:
如下图所示,需要将一个元素固定到父元素的正中间,水平垂直居中
如何使用css实现此需求:
其实这个需求是有固定代码的,通过我的这篇博客学习这一次,然后记住即可!
第一步: 既然是相对于父元素定位,那么就要使用绝对定位。
代码:position: absolute;
第二步: 往右走父元素的一半,往下走父元素的一半。
代码:left: 50%;
top: 50%;
此时会看到子元素向右多走了自己的长度,向下多走了自己的宽度,所以要相对自己往回走50%
第三步: 往左走自己长度的50%,往上走自己宽度的50%。(使用transform
)
代码:transform: translate(-50%,-50%);
完整代码:
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
一般情况下,无特殊需求,复制这段代码即可实现此需求。
注意:
由于使用了绝对定位,所以必须确保其父元素是具有定位属性的,如果没有,在父元素的css上加上position: relative;
即可。