Flex and centering?

Question

css

There is a ul with display:flex; justify-content: center;, it has 3 elements. Two of them are left- and right-aligned using margin-right: auto;and margin-left: auto;respectively. At the same time, all elements (both the left one, and the one in the center, and the right one) have different sizes. Because of this, it turns out that the element that should be centered is located rather in the center between the other elements, and not in the center of the page, as originally intended. How can I force the element in the middle to be centered off the page and ignore the elements on the left and right?
Example

Answer 1

It won't work on flex. Absolute if only put the central block.
https://jsfiddle.net/webirus/1rfyhmcf/2/
And this construction

justify-content: center; margin-right: auto; margin-left: auto;

has a ready-made analogue on flexbox justify-content: space-between;
flexbox.help