Problema con posizione elemento

[techno]

Ciao a tutti
Sto avendo un problema con la posizione di un elemento nonostante io gli dia la posizione esatta, mi spiego, creo un elemento in javascript:

const padre = document.querySelector(".box-padre");
const el = document.createElement("span");
el.setAttribute("class","preloader");
padre.appendChild(el);

Ora il CSS:

.box-padre {
position:relative;
width: 100%;
height: 100%;
}
.preloader {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
...
}

ecco quello che non prende è il translate mi sapreste dire il perchè?