css3-translate居中

前言

在css2.1中,有一种居中技巧。就是布局采用“子绝父相”,子盒子设置如下,就会垂直水平居中。其中margin-left和margin-top的值分别为子盒子宽度和高度的一半。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#outer {
position: relative;
width: 500px;
height: 500px;
border: 2px solid yellow;
}
#inner {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: red;
}

这种缺点就是margin的相关值不能根据百分比进行设置。打不到响应式的效果。因为margin的百分比是相对于父盒子的width来进行转换的。

css3-translate

css3中有个transform 属性,这个属性有个属性值为translate(),translate可以让自身元素相对于自身元素的位置进行移动。translate里面的参数可以传百分比形式值。比如:transform:translate(50%,50%),其中50%是根据自身的宽度和高度进行计算的。所以,我们可以把上面的代码修改一下:(注意子盒子的transform的相关值)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#outer {
position: relative;
width: 500px;
height: 500px;
border: 2px solid yellow;
}
#inner {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: red;
}

效果图如下:

总结

一种居中技巧吧。