Trung tâm CSS hiển thị khối nội tuyến?

Tôi có một mã làm việc ở đây: http://jsfiddle.net/WVm5d/ (bạn có thể cần phải làm cho cửa sổ kết quả lớn hơn để xem hiệu ứng trung tâm căn chỉnh)

Câu hỏi

Mã này hoạt động tốt nhưng tôi không muốn có display: table;. Đó là cách duy nhất tôi có thể làm cho trung tâm sắp xếp lớp bọc. Tôi nghĩ sẽ tốt hơn nếu có cách sử dụng display: block;hay display: inline-block;. Có thể giải quyết trung tâm align một cách khác?

Thêm một cố định với container không phải là một lựa chọn cho tôi.

Tôi cũng sẽ dán mã của mình vào đây nếu liên kết JS Fiddle bị hỏng trong tương lai:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

Giải pháp được chấp nhận sẽ không hiệu quả với tôi vì tôi cần một phần tử con display: inline-blockcó cả chiều ngang và chiều dọc trong phạm vi cha mẹ 100% chiều rộng.

Tôi đã sử dụng các thuộc tính justify-contentvà hộp của Flexbox align-items, tương ứng cho phép bạn căn giữa các phần tử theo chiều ngang và chiều dọc. Bằng cách đặt cả hai centerlên cha, phần tử con (hoặc thậm chí nhiều phần tử!) Sẽ hoàn toàn ở giữa.

Giải pháp này không yêu cầu chiều rộng cố định, điều này sẽ không phù hợp với tôi vì văn bản của nút của tôi sẽ thay đổi.

Dưới đây là bản demo CodePen và một đoạn mã liên quan dưới đây:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Thử cái này. Tôi đã thêm text-align: centervào cơ thể và display:inline-blockđể bọc, và sau đó loại bỏ của bạndisplay: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Nếu bạn có một <div>với text-align:center;, thì bất kỳ văn bản nào bên trong nó sẽ được căn giữa đối với chiều rộng của phần tử container đó. inline-blockcác yếu tố được coi là văn bản cho mục đích này, vì vậy chúng cũng sẽ được tập trung.

Bạn cũng có thể làm điều này với định vị, đặt div cha thành tương đối và div con thành tuyệt đối.

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

Bạn không cần sử dụng "display: table". Lý do lề của bạn: 0 nỗ lực định tâm tự động không hoạt động là do bạn không chỉ định chiều rộng.

Điều này sẽ làm việc tốt:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

Bạn không cần chỉ định display: block vì div sẽ được chặn theo mặc định. Bạn cũng có thể mất tràn: ẩn.

Tương tự như câu trả lời của @ vijayscode, điều này sẽ tập trung theo chiều ngang một phần tử khối nội tuyến (nhưng không cần phải sửa đổi kiểu của cha mẹ):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

Tôi chỉ thay đổi 2 tham số:

.wrap {
    display: block;
    width:661px;
}

Bản thử trực tiếp

Bài viết tuyệt vời tôi tìm thấy những gì làm việc tốt nhất cho tôi là thêm% vào kích thước

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Chỉ dùng:

line-height:50px

Thay thế "50px" bằng cùng chiều cao với div của bạn.