問(wèn)題描述

header是用的flex布局，想要搜索框水平居中，類似原生IOS里面的布局

不受左右兩邊內(nèi)容的影響，依然水平居中我記得我之前實(shí)現(xiàn)過(guò)，后來(lái)用了flex.css就忘了，麻煩看看用這個(gè)怎么實(shí)現(xiàn)

問(wèn)題解答

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

詳細(xì)了解Flex布局見：http://www.ruanyifeng.com/blo...

只有三個(gè)元素可以直接用 space-between 撐開

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

你后來(lái)更新的

不受左右兩邊內(nèi)容的影響，依然水平居中

既然不受影響那么只能是 absolute 抽離出來(lái)再居中了。

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

主要用到 align-items: center 即可這是demo

中間那個(gè)就用絕對(duì)定位,左右邊寬度不一樣的話會(huì)影響中間位置

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