.header{ display:flex; flex-flow:row nowrap; align-item:center; justify-content:space-around; }

To learn more about Flex layout, please see: http://www.ruanyifeng.com/blo...

Only three elements can be spread directly using space-between

https://jsfiddle.net/straybug...

---

You updated later

Not affected by the content on the left and right, still horizontally centered

Since it is not affected, the only way is to extract the absolute and then center it.

https://jsfiddle.net/straybug...

Mainly usealign-items: center
This is a demo

Use absolute positioning for the middle one. If the left and right widths are different, it will affect the middle position

.search { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }