The header uses flex layout. I want the search box to be horizontally centered, similar to the layout in native IOS
It is not affected by the content on the left and right sides, and is still horizontally centered
I remember that I implemented it before, but then I forgot about it when I used flex.css. Please see how to achieve it with this
.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...
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%);
}