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