How to fix an element to viewport center regarding the container element?

Consider two container elements side by side, both of them are longer than the width of the viewport and the viewport is scrollable horizontally. Both of them contain an element inside that I want to keep in the center of visible portion of the containing div. Here is the markup: