sắp xếp theo chiều dọc và ngang (giữa và giữa) với css

Question

Tôi đang thực hành CSS và tôi rất bối rối làm cách nào để buộc phần tử div của tôi trở thành trung tâm (theo chiều dọc và chiều ngang) tại trang của tôi (có nghĩa là cách hoặc cách để duyệt qua) tương thích)?

Trân trọng!

Answer 1

Có rất nhiều phương pháp:

1. Center class ngang và dọc của một phần tử với biện pháp cố định

CSS

<div style="width:200px;height:100px;position:absolute;left:50%;top:50%; 
margin-left:-100px;margin-top:-50px;"> 
<!–content–> 
</div> 

---

2. Trung tâm ngang và dọc một dòng văn bản

CSS

<div style="width:400px;height:200px;text-align:center;line-height:200px;"> 
<!–content–> 
</div> 

---

3. Căn giữa theo chiều ngang và dọc của một phần tử không có biện pháp cụ thể

CSS

<div style="display:table;height:300px;text-align:center;"> 
<div style="display:table-cell;vertical-align:middle;"> 
<!–content–> 
</div> 
</div> 

---

More đây:Horizontal and Vertical Alignment in CSS

Answer 2

This blog post mô tả hai phương pháp tập trung một div cả chiều ngang và theo chiều dọc. Một người chỉ sử dụng CSS và sẽ làm việc với các div có kích thước cố định; khác sử dụng jQuery và sẽ làm việc divs mà bạn không biết kích thước trước.

Tôi đã nhân đôi CSS và các ví dụ jQuery từ bản demo bài đăng blog ở đây:

CSS

Giả sử bạn có một div với một lớp .classname, css dưới đây nên làm việc.

left:50%; top:50%; đặt góc trên cùng bên trái của div vào giữa màn hình; các margin:-75px 0 0 -135px; di chuyển nó sang trái và lên một nửa chiều rộng và chiều cao của div kích thước cố định tương ứng.

.className{ 
    width:270px; 
    height:150px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-75px 0 0 -135px; 
} 

jQuery

$(document).ready(function(){ 
    $(window).resize(function(){ 
     $('.className').css({ 
      position:'absolute', 
      left: ($(window).width() - $('.className').outerWidth())/2, 
      top: ($(window).height() - $('.className').outerHeight())/2 
     }); 
    }); 
    // To initially run the function: 
    $(window).resize(); 
}); 

Dưới đây là một demo of the techniques in practice.

Answer 3

Điều này không dễ làm như bạn có thể mong đợi - bạn thực sự chỉ có thể thực hiện căn chỉnh theo chiều dọc nếu bạn biết chiều cao của vùng chứa. Nếu đây là trường hợp, bạn có thể làm điều đó với vị trí tuyệt đối.

Khái niệm này là đặt các vị trí trên cùng/bên trái ở mức 50% và sau đó sử dụng lề âm (được đặt thành một nửa chiều cao/chiều rộng) để kéo vùng chứa trở lại làm trung tâm.

Ví dụ: http://jsbin.com/ipawe/edit

CSS cơ bản:

#mydiv { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 400px; 
    width: 700px; 
    margin-top: -200px; /* -(1/2 height) */ 
    margin-left: -350px; /* -(1/2 width) */ 
    } 

Answer 4

Trang web này cung cấp cho một số tùy chọn trên theo chiều dọc trung div của bạn: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 5

Có một giải pháp tốt hơn bây giờ: Vertical align anything with just 3 lines of CSS