Làm cách nào để căn giữa div theo chiều dọc?

Question

Tôi có một số div mà tôi muốn căn giữa theo chiều ngang và chiều dọc.

Đối với vấn đề nằm ngang, mọi thứ đều tuyệt vời, nhưng tôi gặp sự cố với căn chỉnh theo chiều dọc.

Tôi cố gắng này:

#parent { 
    display: table; 
} 

#child { 
    display: table-row; 
    vertical-align: middle; 
} 

nhưng điều này không hoạt động.

Answer 1

Nếu bạn chỉ phải hỗ trợ các trình duyệt hỗ trợ transform (hoặc nhà cung cấp phiên bản tiền tố), hãy sử dụng thủ thuật cũ kỳ lạ này để căn chỉnh các phần tử theo chiều dọc.

#child { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Nếu bạn phải hỗ trợ các trình duyệt cũ, bạn có thể sử dụng kết hợp trong số này, nhưng họ có thể là một nỗi đau do sự khác biệt trong việc cung block vs table.

#parent { 
    display: table; 
} 

#child { 
    display: table-cell; 
    vertical-align: middle; 
} 

Nếu chiều cao của bạn là cố định và bạn cần phải hỗ trợ những, trình duyệt pesky thực sự cũ ...

#parent { 
    position: relative; 
} 

#child { 
    height: 100px; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
} 

Nếu chiều cao của bạn chưa được khắc phục, có một workaround.

See it on jsFiddle.

Answer 2

Trước hết, xử lý đánh dấu bảng không phải là bảng (có hiển thị: bảng và bạn bè) không phải là trình duyệt chéo. Tôi không biết bạn cần hỗ trợ những trình duyệt nào nhưng chắc chắn IE6 sẽ không làm điều này. Tuy nhiên, nếu trình duyệt được nhắm mục tiêu của bạn làm tất cả màn hình hỗ trợ: bảng Tôi có thể cung cấp cho bạn một số mẹo.

Phương pháp căn giữa theo chiều dọc mà bạn đang tìm kiếm (sử dụng bố cục bảng) phụ thuộc vào việc có TD với căn chỉnh dọc: giữa, sau đó bên trong đó một phần tử khối đơn sẽ nằm ở giữa. Vì vậy, tôi nghĩ rằng những gì bạn muốn là:

#parent { display:table-cell; vertical-align:middle; } 
#child { /* nothing necessary, assuming it's a DIV it's already display:block */ } 

Bạn có thể sử dụng bảng ô không có bảng và bàn xung quanh, trình duyệt cần các yếu tố gói bảng cần thiết cho bạn.

Answer 3

đây là một cách khác khi bạn không biết kích thước div bên trong hoặc bất cứ điều gì, bạn có thể sử dụng% ở đây và ở đó để sửa chữa các "trung" ....

ý tưởng là giá trị hàng đầu của bạn là một nửa chiều cao của phần tử con của bạn để tạo ra ảo giác định tâm

Dưới đây là các mã:

<div id="parent"> 
    <div id="child"> 
      hello 
    </div> 
</div> 

và cho phong cách:

#parent { 
    position: relative; 
    height: 300px; 
    width:200px; 
    background-color:green; 
} 

#child { 
    height: 50%; 
    width: 50%; 
    position:relative; 
    top:25%; 
    left:25%; 
    background-color:red; 
} 

đây bạn có thể nhìn thấy nó trong hành động http://jsfiddle.net/Wabxv/

Answer 4

Có tài sản cha mẹ như, display:table và tài sản con như display: table-cell và vertical-align: middle làm việc cho tôi.