You'd still need to change the size of the code for the arrow wouldn't you so I don't see ts much effort. If you want automatic alignment then you'd need to use flexbox or display:table-cell inside the absolute element.
You could also center easily if you have a fixed height.
It's fine when its not a 'magic number' which it is not because you are working with a an element of fixed height. Negative margins are bad when you use them just to make things line up depending on a guessed size. For something like an arrow its fine bit not for a box full of fluid content.
Of course automatic is always better and if you nested a full height display:table element and a table-cell element inside your absolute element you could simply use vertical-align:middle.
Or indeed use flexbox although again the structure would probably need to be changed.
The easiest solution in this case is the negative margin or the fixed height auto margin example (the snippet above).