Actually CSS is not arbitrary. I don't know what you mean by "setting a position" but if you use float to right or left align an element, it will cause text to wrap on the opposite side. How would text wrap on float: center? It doesn't make sense, that's why you'd just want blank space on each side (hence margins.)
Everything else works well with absolute positioning. Need something vertically aligned?
position: absolute;
top: 50%;
margin-top: (1/2 height of element)
as mentioned in another comment this only works if you know the height. Your example is exactly the issue that the original comment was talking about.
Your intention is to align both centers. Why do we need to be dealing with 'top' and 'margin-top' to achieve this? It is a poor way to describe your intention.
It's much easier to say:
box1.center == box2.center
The cassowary solver allows you to specify exactly your intentions in relation to the edges and centers of boxes. It's easier to reason about and doesn't require the bag of weird tricks that are needed in CSS (eg. margin: 0 auto; to center??? wtf?)
Everything else works well with absolute positioning. Need something vertically aligned?