Làm thế nào để căn chỉnh theo chiều dọc vào giữa nội dung của một div với chiều rộng / chiều cao xác định?

Đâu sẽ là phương pháp chính xác để căn giữa theo chiều dọc bất kỳ nội dung nào theo chiều rộng / chiều cao xác định div.

Trong ví dụ này có hai nội dung có độ cao khác nhau, cách tốt nhất để căn giữa theo chiều dọc cả hai bằng cách sử dụng lớp .content. (và nó hoạt động cho mọi trình duyệt và không có giải pháp của table-cell)

Có một số giải pháp trong tâm trí, nhưng muốn biết những ý tưởng khác, một trong những ý tưởng đang sử dụng position:absolute; top:0; bottom: 0;và margin auto.

Tôi đã nghiên cứu điều này một chút và từ những gì tôi nhận thấy bạn có bốn lựa chọn:

Phiên bản 1: div chính với hiển thị dưới dạng ô bảng

Nếu bạn không phiền khi sử dụng display:table-celldiv trên cha mẹ của mình, bạn có thể sử dụng các tùy chọn sau:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Bản thử trực tiếp

Phiên bản 2: div chính với khối hiển thị và bảng-ô hiển thị nội dung

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Bản thử trực tiếp

Phiên bản 3: Di động div chính và div nội dung dưới dạng ô bảng hiển thị

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Bản thử trực tiếp

Phiên bản 4: Vị trí div chính tương đối với vị trí nội dung tuyệt đối

Vấn đề duy nhất mà tôi gặp phải với phiên bản này là có vẻ như bạn sẽ phải tạo css cho mọi triển khai cụ thể. Lý do cho điều này là div nội dung cần phải có chiều cao đã đặt mà văn bản của bạn sẽ lấp đầy và phần đầu lề sẽ được xác định. Vấn đề này có thể được nhìn thấy trong bản demo. Bạn có thể làm cho nó hoạt động cho mọi tình huống theo cách thủ công bằng cách thay đổi% chiều cao của div nội dung của bạn và nhân nó với-5 để nhận giá trị margin-top của bạn.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Bản thử trực tiếp

Điều này cũng có thể được thực hiện display: flexchỉ với một vài dòng mã. Đây là một ví dụ:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Bản thử trực tiếp

Tôi đã tìm thấy giải pháp này trong bài viết này

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Nó hoạt động giống như một sự quyến rũ nếu chiều cao của phần tử không cố định.

margin: all_four_margin

bằng cách cung cấp 50% cho all_four_margin sẽ đặt phần tử ở trung tâm

style="margin: 50%"

bạn cũng có thể áp dụng nó để theo dõi

lề: trên cùng bên phải dưới cùng bên trái

lề: trên cùng bên phải & bên trái dưới cùng

lề: trên & dưới bên phải & bên trái

bằng cách đưa ra% thích hợp, chúng tôi nhận được phần tử ở bất cứ đâu chúng tôi muốn.