อะไรคือสิ่งที่จำเป็นสำหรับ“ margin: 0 auto;” ไปทำงาน?

ฉันรู้ว่าการตั้งค่าmargin: 0 auto;องค์ประกอบใช้เพื่อจัดกึ่งกลาง (ซ้าย - ขวา) อย่างไรก็ตามฉันรู้ว่าองค์ประกอบและผู้ปกครองต้องตรงตามเกณฑ์บางอย่างเพื่อให้ระยะขอบอัตโนมัติทำงานได้และฉันไม่สามารถทำให้ถูกต้องได้

ดังนั้นคำถามของฉันง่าย: คุณสมบัติ CSS ใดที่จะต้องมีการตั้งค่าในองค์ประกอบและผู้ปกครองของมันเพื่อmargin: 0 auto;ให้เด็กตรงกลางซ้ายขวา?

ปิดส่วนหัวของฉัน:

1. องค์ประกอบจะต้องเป็นระดับบล็อกเช่นdisplay: blockหรือdisplay: table
2. องค์ประกอบจะต้องไม่ลอย
3. องค์ประกอบต้องไม่มีตำแหน่งที่แน่นอนหรือแน่นอน¹

ออกจากหัวของคนอื่น:

4. องค์ประกอบจะต้องมีwidthที่ไม่ใช่auto²

โปรดทราบว่าเงื่อนไขเหล่านี้ทั้งหมดจะต้องเป็นจริงขององค์ประกอบที่เป็นศูนย์กลางในการทำงาน

¹ _{มีหนึ่งข้อยกเว้นนี้คือถ้าคงที่หรือองค์ประกอบตำแหน่งอย่างมีของคุณleft: 0; right: 0, มันจะอยู่ตรงกลางที่มีอัตรากำไรอัตโนมัติ}

^{2 ใน} _{ทางเทคนิคmargin: 0 autoทำงานกับความกว้างอัตโนมัติ แต่ความกว้างอัตโนมัติมีความสำคัญเหนือกว่าระยะขอบอัตโนมัติและผลของระยะห่างอัตโนมัติจะถูกทำให้เป็นศูนย์จนทำให้ดูเหมือนว่า "ไม่ทำงาน"}

widthปิดด้านบนของหัวของฉันมันต้องการ คุณต้องระบุความกว้างของคอนเทนเนอร์ที่คุณจัดให้อยู่กึ่งกลาง (ไม่ใช่ความกว้างพาเรนต์)

กฎที่สมบูรณ์สำหรับ CSS:

1. ( display: blockและwidthไม่ใช่อัตโนมัติ) หรือdisplay: table
2. float: none
3. position: relative

ปิดส่วนบนของหัวถ้าองค์ประกอบไม่ใช่องค์ประกอบบล็อก - ทำเช่นนั้น

แล้วให้ความกว้าง

มันจะทำงานร่วมกับ display: table - คุณสมบัติการแสดงผลที่มีประโยชน์ในกรณีนี้เพราะมันไม่จำเป็นต้องตั้งค่าความกว้าง (ฉันรู้ว่าโพสต์นี้มีอายุ 5 ปี แต่ก็ยังเกี่ยวข้องกับผู้คนโดย)

ปิดด้านบนของหัวแมวของฉันให้แน่ใจว่าคุณกำลังพยายามที่ศูนย์ไม่ได้ตั้งค่าdivwidth: 100%

ถ้าเป็นเช่นนั้นกฎที่ตั้งไว้ใน divs เด็กเป็นสิ่งที่จะมีความสำคัญ

โปรดไปที่ตัวอย่างรวดเร็วนี้เราได้สร้างjsFiddle หวังว่ามันจะเข้าใจง่าย คุณสามารถใช้wrapperdiv ที่มีความกว้างของไซต์เพื่อจัดกึ่งกลาง เหตุผลที่คุณต้องใส่widthก็คือเพื่อให้เบราว์เซอร์รู้ว่าคุณไม่ได้ไปสำหรับรูปแบบของเหลว

นี่คือคำแนะนำของฉัน:

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;

อาจเป็นเรื่องที่น่าสนใจที่คุณไม่ต้องระบุความกว้างสำหรับ<button>องค์ประกอบเพื่อให้ทำงานได้ - ตรวจสอบให้แน่ใจว่ามีdisplay:block: http://jsfiddle.net/muhuyttr/

สำหรับใครเพียงแค่ตอนนี้ตีคำถามนี้และไม่สามารถที่จะแก้ไขปัญหาmargin: 0 autoที่นี่เป็นสิ่งที่ผมค้นพบคุณอาจพบว่ามีประโยชน์: เป็นtableองค์ประกอบที่มีความกว้างไม่ระบุต้องมีdisplay: tableและไม่ได้ display: blockเพื่อให้margin: autoการทำงาน สิ่งนี้อาจเห็นได้ชัดสำหรับบางคนเนื่องจากการรวมกันของdisplay: blockและค่าเริ่มต้นwidthจะให้ตารางที่ขยายเพื่อเติมตู้คอนเทนเนอร์ แต่ถ้าคุณต้องการให้ตารางใช้ความกว้าง "ธรรมชาติ" และอยู่กึ่งกลางคุณต้องการdisplay: table