translate实现绝对居中效果。
translate一直是我实现居中效果众多属性中最多的一个属性，我认为这个属性简单，使用方便，在此小记。
translate(X,Y)定义2D转换，其中X是定义X轴的值，Y轴是定义Y轴的值。
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>translate</title>
<style>
.bg{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1992;
background-color: rgba(0,0,0,0.1);
}
.center{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform:translate(-50%,-50%);
background: red;
color: #fff;
}
</style>
</head>
<body>
<div class="bg">
<div class="center">translate绝对居中</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/luna666/p/9662173.html
时间： 2024-08-08 18:29:10