translateX and translateY on same element?

Question

Is it possible to apply a CC translate X and Y on the same element?

If I try this the translateX is overridden by the translateY:

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

Answer 1

You can do something like this

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

Answer 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%);
}

Answer 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);