Chính xác thì cái gì là cần thiết cho lề lề: 0 auto; làm việc?

Tôi biết rằng cài đặt margin: 0 auto;trên một phần tử được sử dụng để căn giữa nó (trái-phải). Tuy nhiên, tôi biết rằng phần tử và cha mẹ của nó phải đáp ứng các tiêu chí nhất định để lề tự động hoạt động và dường như tôi không bao giờ có thể làm được điều kỳ diệu.

Vì vậy, câu hỏi của tôi rất đơn giản: những thuộc tính CSS nào phải được đặt trên một phần tử và phần tử mẹ của nó để tập trung margin: 0 auto;vào bên trái con?

Off đỉnh đầu của tôi:

1. Phần tử phải ở cấp độ khối, ví dụ display: blockhoặcdisplay: table
2. Phần tử không được nổi
3. Phần tử không được có vị trí cố định hoặc tuyệt đối ¹

Ra khỏi đầu người khác:

4. Phần tử phải có widthkhông phải là auto²

Lưu ý rằng tất cả các điều kiện này phải đúng với phần tử được căn giữa để nó hoạt động.

¹ _{Có một ngoại lệ cho điều này: nếu yếu tố cố định hoặc vị trí tuyệt đối của bạn có left: 0; right: 0, nó sẽ tập trung vào lề tự động .}

² _{Về mặt kỹ thuật, margin: 0 autokhông hoạt động với chiều rộng tự động, nhưng chiều rộng tự động được ưu tiên hơn so với lề tự động và kết quả là lề tự động bị loại bỏ, do đó dường như chúng "không hoạt động".}

Ra khỏi đỉnh đầu của tôi, nó cần a width. Bạn cần chỉ định chiều rộng của container bạn đang định tâm (không phải chiều rộng cha).

Quy tắc hoàn chỉnh cho CSS:

1. ( display: blockVÀ widthkhông tự động) HOẶCdisplay: table
2. float: none
3. position: relative

Ra khỏi đỉnh đầu của tôi, nếu phần tử không phải là một phần tử khối - hãy làm cho nó như vậy.

và sau đó cho nó một chiều rộng.

Nó cũng sẽ hoạt động với display: table - một thuộc tính hiển thị hữu ích trong trường hợp này vì nó không yêu cầu đặt chiều rộng. (Tôi biết bài đăng này đã 5 tuổi, nhưng nó vẫn phù hợp với người qua đường;)

Nằm trên đỉnh đầu con mèo của tôi, đảm bảo rằng divbạn đang cố gắng tập trung vào không được đặt thành width: 100%.

Nếu đúng như vậy, thì các quy tắc đặt ra trên div con là điều quan trọng.

Vui lòng xem ví dụ nhanh này Tôi đã tạo jsFiddle . Hopefull thật dễ hiểu. Bạn có thể sử dụng wrapperdiv với chiều rộng của trang để căn giữa. Lý do bạn phải đặt ra widthlà để trình duyệt biết bạn sẽ không bố trí lỏng.

Đây là gợi ý của tôi:

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;

Có lẽ thật thú vị khi bạn không phải chỉ định chiều rộng cho một <button>phần tử để làm cho nó hoạt động - chỉ cần đảm bảo rằng nó có display:block: http://jsfiddle.net/muhuyttr/

Đối với bất cứ ai chỉ là bây giờ đánh câu hỏi này, và không có khả năng sửa chữa margin: 0 auto, cái gì ở đây của tôi phát hiện ra bạn có thể thấy hữu ích: một tableyếu tố không có chiều rộng quy định phải có display: tablevà không display: block để cho margin: autođể làm việc. Điều này có thể rõ ràng với một số người, vì sự kết hợp của display: blockvà widthgiá trị mặc định sẽ đưa ra một bảng mở rộng để điền vào vùng chứa của nó, nhưng nếu bạn muốn bảng lấy chiều rộng "tự nhiên" và được căn giữa, bạn cầndisplay: table