translateX and translateY on same element?

Solution 1:

You can do something like this

transform:translate(-50%,-50%);

Solution 2:

In your case, you can apply both X and Y translations with the translate property :

transform: translate(tx[, ty]) /* one or two <translation-value> values */

[source: MDN]

for your example, it would look like this :

.something { 
  transform: translate(-50%,-50%);
}

DEMO:

div{
  position:absolute;
  top:50%; left:50%;
  width:100px; height:100px;
  transform: translate(-50%,-50%);
  background:tomato;
}

<div></div>

As stated by this answer How to apply multiple transforms in CSS3? you can apply several transforms on the same element by specifying them on the same declaration :

.something { 
  transform: translateX(-50%) translateY(-50%);
}

Solution 3:

You can combine X and Y translates into a single expression:

transform: translate(10px, 20px); /* translate X by 10px, y by 20px */

And, in general, several transforms into a single rule:

transform: translateX(10px) translateY(20px) scale(1.5) rotate(45deg);