Căn giữa văn bản theo chiều dọc trong Div bằng CSS

Kỹ thuật CSS nâng cao để căn giữa theo chiều dọc

Trong tập lệnh thứ ba, chúng tôi sử dụng phương thức hiển thị bảng. Cài đặt display: table; trên thùng chứa và display: table-cell; trên một phần tử giả được tạo bằng số 8 cho phép chúng ta sử dụng vertical-align: middle; tài sản. Phương pháp này bắt chước hoạt động của các ô trong bảng, giúp có thể căn giữa nội dung theo chiều dọc. Mặc dù phương pháp này ít được sử dụng phổ biến hơn trong thiết kế web hiện đại nhưng nó có thể hữu ích trong việc duy trì khả năng tương thích với các trình duyệt cũ hơn hoặc khi xử lý mã cũ. Nó cung cấp một cách đáng tin cậy để căn giữa nội dung mà không cần dựa vào các hệ thống bố cục mới hơn.

Ví dụ tập lệnh thứ tư sử dụng line-height tài sản. Bằng cách thiết lập line-height bằng chiều cao của vùng chứa, văn bản được căn giữa theo chiều dọc. Kỹ thuật này đơn giản và hiệu quả đối với văn bản một dòng. Tuy nhiên, nó có thể không phù hợp với văn bản nhiều dòng hoặc nội dung động trong đó chiều cao của vùng chứa có thể thay đổi. Mặc dù có những hạn chế, nhưng line-height phương pháp này là một giải pháp nhanh chóng và dễ dàng để căn giữa văn bản theo chiều dọc trong các tình huống đơn giản.

Sử dụng Flexbox để định tâm dọc

CSS Flexbox

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Sử dụng lưới để định tâm theo chiều dọc

Lưới CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Sử dụng bảng hiển thị để định tâm dọc

Hiển thị bảng CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

Sử dụng chiều cao dòng để căn giữa theo chiều dọc

Chiều cao dòng CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Các câu hỏi thường gặp về Căn giữa dọc trong CSS

1. Cách dễ nhất để căn giữa văn bản theo chiều dọc trong div là gì?
2. sử dụng display: flex; với justify-content: center; Và align-items: center; thường là phương pháp dễ dàng và hiệu quả nhất.
3. Làm cách nào để căn giữa văn bản theo chiều dọc trong các trình duyệt cũ hơn?
4. Sử dụng phương pháp hiển thị bảng với display: table; Và vertical-align: middle; có thể giúp đạt được việc căn giữa theo chiều dọc trong các trình duyệt cũ hơn.
5. CSS Grid có thể được sử dụng để căn giữa văn bản theo chiều dọc không?
6. Có, CSS Grid có thể căn giữa văn bản theo chiều dọc bằng cách sử dụng display: grid; Và place-items: center;.
7. Có thể căn giữa văn bản nhiều dòng theo chiều dọc không?
8. Có, sử dụng Flexbox hoặc CSS Grid có thể dễ dàng căn giữa văn bản nhiều dòng theo chiều dọc trong một vùng chứa.
9. Làm cách nào để căn giữa văn bản theo chiều dọc với chiều cao vùng chứa đã biết?
10. Bạn có thể thiết lập line-height thuộc tính phù hợp với chiều cao của vùng chứa, căn giữa văn bản một cách hiệu quả.
11. Điều gì xảy ra nếu chiều cao vùng chứa là động?
12. Sử dụng Flexbox, Grid hoặc transform thuộc tính đảm bảo định tâm theo chiều dọc nhất quán, ngay cả với chiều cao vùng chứa động.
13. Có bất kỳ hạn chế nào khi sử dụng transform: translateY(-50%);?
14. Mặc dù hiệu quả nhưng nó đòi hỏi phụ huynh phải có position: relative; và có thể phức tạp hơn một chút khi triển khai so với Flexbox hoặc Grid.
15. Làm thế nào để bạn căn giữa văn bản theo chiều dọc trong một thiết kế đáp ứng?
16. Nên sử dụng Flexbox hoặc CSS Grid cho các thiết kế đáp ứng vì chúng thích ứng tốt với các kích thước và hướng màn hình khác nhau.

Suy nghĩ cuối cùng về định tâm dọc

Việc đạt được việc căn giữa văn bản theo chiều dọc trong div có thể được thực hiện thông qua một số phương pháp hiệu quả. Các kỹ thuật hiện đại như Flexbox và Grid mang lại sự linh hoạt và dễ thực hiện nhất. Các phương pháp cũ hơn, chẳng hạn như hiển thị bảng và chiều cao dòng, vẫn có thể hữu ích trong các trường hợp cụ thể. Bằng cách hiểu và áp dụng các phương pháp tiếp cận khác nhau này, nhà phát triển có thể đảm bảo nội dung của họ hấp dẫn về mặt hình ảnh và được căn chỉnh phù hợp trên nhiều thiết bị và trình duyệt khác nhau.