transform: tranlate(-50%,-50%)的使用
今天复习到元素的水平垂直居中时,发现有一种方法是绝对定位加上元素平移来实现,初看时非常好奇为什么要加上元素平移,这个元素平移起到什么作用,然后打了个demo简单分析了一波。
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 200px;
height: 200px;
background-color: brown;
position: relative;
}
#inner {
width: 50px;
height: 60px;
background-color: cadetblue;
/* 实现水平垂直居中 */
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
这是不加平移的效果:
我们可以发现,绝对定位的定位点其实是子元素的左上顶点,只是使用绝对定位无法实现水平垂直居中,这时候我们要调整子元素,让它的中心点平移到原先左上顶点的位置。
要做到这点,我们只要把元素像上平移其自身的一半高度,像左平移其自身的一半宽度即可实现。
/* 实现水平垂直居中 */
position: absolute;
top: 50%;
left: 50%;
/* 上面这样实现后,在父元素内水平垂直居中的是子元素的左上顶点 */
/* 要使子元素水平垂直居中,我们要把子元素的中心点平移到其原先左上顶点的位置 */
transform: translate(-50%,-50%);
加了平移的效果:
总的来说,这个方法可以用来实现不知道宽高的子元素的水平垂直居中。