Apa, tepatnya, yang dibutuhkan untuk "margin: 0 auto;" bekerja?

Saya tahu bahwa pengaturan margin: 0 auto;pada elemen digunakan untuk memusatkannya (kiri-kanan). Namun, saya tahu bahwa elemen dan induknya harus memenuhi kriteria tertentu agar margin otomatis berfungsi, dan sepertinya saya tidak pernah bisa mendapatkan keajaiban dengan benar.

Jadi pertanyaan saya sederhana: properti CSS apa yang harus ditetapkan pada suatu elemen dan orang tuanya agar margin: 0 auto;dapat memusatkan kiri-kanan anak?

Dari atas kepala saya:

1. Elemen harus berupa blok-level, misalnya display: blockataudisplay: table
2. Elemen tidak boleh mengambang
3. Elemen tidak boleh memiliki posisi tetap atau absolut ¹

Di atas kepala orang lain:

4. Elemen harus memiliki widthyang bukan auto²

Perhatikan bahwa semua kondisi ini harus benar dari elemen yang dipusatkan agar berfungsi.

¹ _{Ada satu pengecualian untuk ini: jika Anda tetap atau elemen benar-benar diposisikan memiliki left: 0; right: 0, itu akan pusat dengan margin auto .}

² _{Secara teknis, margin: 0 automemang bekerja dengan lebar otomatis, tetapi lebar otomatis lebih diutamakan daripada margin otomatis, dan margin otomatis menjadi nol, sehingga seolah-olah "tidak berfungsi".}

Dari atas kepala saya, perlu a width. Anda harus menentukan lebar wadah yang Anda tuju (bukan lebar induk).

Aturan lengkap untuk CSS:

1. ( display: blockDAN widthbukan otomatis) ATAUdisplay: table
2. float: none
3. position: relative

Dari atas kepala saya, jika elemen tersebut bukan elemen blok - buatlah begitu.

dan kemudian berikan lebar.

Ini juga akan berfungsi dengan display: table - properti display yang berguna dalam hal ini karena tidak memerlukan lebar untuk diatur. (Saya tahu posting ini berusia 5 tahun, tetapi masih relevan untuk orang yang lewat;)

Dari atas kepala kucing saya, pastikan divAnda mencoba untuk pusat tidak diatur ke width: 100%.

Jika ya, maka aturan yang ditetapkan pada div anak adalah yang penting.

Silakan buka contoh cepat ini yang saya buat jsFiddle . Semoga mudah dimengerti. Anda dapat menggunakan wrapperdiv dengan lebar situs untuk meluruskan pusat. Alasan Anda harus meletakkannya widthadalah agar browser tahu Anda tidak akan menggunakan tata letak cair.

Ini saran saya:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Mungkin menarik bahwa Anda tidak harus menentukan lebar untuk <button>elemen agar bisa berfungsi - pastikan saja memiliki display:block: http://jsfiddle.net/muhuyttr/

Bagi siapa pun sekarang memukul pertanyaan ini, dan tidak mampu memperbaiki margin: 0 auto, di sini ini sesuatu yang saya menemukan Anda mungkin menemukan berguna: a tableelemen tanpa lebar tertentu harus memiliki display: tabledan tidak display: block dalam rangka untuk margin: automelakukan pekerjaan. Ini mungkin jelas bagi sebagian orang, karena kombinasi dari display: blockdan nilai default widthakan memberikan tabel yang diperluas untuk mengisi wadahnya, tetapi jika Anda ingin tabel mengambil lebar "alami" dan dipusatkan, Anda perludisplay: table