css - Isu susun atur fleksibel

Question

Pengepala menggunakan reka letak fleksibel Saya mahu kotak carian dipusatkan secara mendatar, serupa dengan reka letak dalam IOS asli

---

Ia tidak terjejas oleh kandungan di sebelah kiri dan kanan, ia masih berpusat secara mendatar
Saya ingat saya telah melaksanakannya sebelum ini, tetapi kemudian saya terlupa mengenainya apabila saya menggunakan flex.css Sila lihat cara mencapainya menggunakan ini

Answer 1

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

Untuk mengetahui lebih lanjut mengenai susun atur Flex, sila lihat: http://www.ruanyifeng.com/blo...

Answer 2

Hanya tiga elemen boleh disebarkan terus menggunakan ruang-antara

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

---

Anda mengemas kini kemudian

Tidak terjejas dengan kandungan di kiri dan kanan, masih melintang tengah

Oleh kerana ia tidak terjejas, satu-satunya cara adalah dengan mengekstrak yang mutlak dan kemudian memusatkannya.

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

Answer 3

Penggunaan terutamanya align-items: center
Ini adalah demo

Answer 4

Gunakan kedudukan mutlak untuk yang tengah Jika lebar kiri dan kanan berbeza, ia akan menjejaskan kedudukan tengah

.

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