Line-height trong css w3schools

Bạn có thể căn giữa một phần tử khối cấp độ bằng cách gán cho lề trái và lề phải giá trị tự động (và phần tử này cũng cần được đặt chiều rộng, nếu không thì nó chiếm toàn bộ chiều rộng và không cần căn giữa . Ta có thể thực hiện công việc này bằng tốc ký sau

.center-me {
  margin: 0 auto;
}

There must have more than a block-level section?

Nếu bạn có hai hoặc nhiều hơn các phần cấp độ khối tử thì cần được căn cứ giữa một hàng. Tốt hơn hết là bạn nên thay đổi cách hiển thị sang inline-block

.center-parent {
  text-align: center;
}

.center-me {
  display: inline-block;
}

hoặc bạn cũng có thể sử dụng flexbox

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

2. Theo chiều dọc

Đó phải là phần tử nội tuyến hay nội tuyến-* (như văn bản hay liên kết)?

Phần tử đó chỉ chiếm một dòng?

Thường thì các phần tử inline/text chỉ có thể được căn giữa bởi vì chúng có phần đệm trên và bên dưới bằng nhau

.center-me {
   padding-top: 30px;
   padding-bottom: 30px;
}

Nếu không thể sử dụng phần đệm vì lý do nào đó và bạn đang tìm cách căn giữa văn bản mà bạn nghĩ sẽ không ngắt dòng, bạn có thể đặt chiều cao dòng bằng với chiều cao

.center-me {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

Phần tử đó chiếm nhiều dòng?

Việc đặt phần đệm bằng nhau với trên và dưới cũng có thể giúp đỡ căn cứ giữa các phần tử nhiều dòng. Tuy nhiên, trong trường hợp phần tử được tạo tương ứng với một ô của bảng, ta có thể gán thuộc tính vetical-align với giá trị ở giữa

.center-me {
  verticle-align: middle;
}

Bạn cũng có thể sử dụng flexbox với giá trị của flex-direction là cột và cố định chiều cao

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

Nếu cả 2 cách trên đều không hoạt động, ta có thể sử dụng kỹ thuật "phần tử ma" trong đó phần tử giả với chiều cao đầy đủ được đặt trong phần tử chứa và văn bản sẽ được gán theo chiều dọc với giá trị ở giữa

.ghost-center {
  position: relative;
}

.ghost-center:before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}

.ghost-center p {
  display: inline-block;
  verticle-align: middle;
}

Đó phải là một phần cấp khối tử?

Bạn có biết chiều cao của phần tử đó không?

Thông thường một phần tử sẽ không có chiều cao cố định nhưng nếu trường hợp đó xảy ra thì bạn có thể căn cứ giữa phần tử đó theo chiều dọc như sau

Bạn không biết chiều cao của phần tử đó?

Tương tự kỹ thuật với trường hợp biết chiều cao tuy nhiên thay vì sử dụng lề-top âm ta sẽ dịch chuyển phần tử đó một khoảng bằng một nửa chiều cao của nó lên theo chiều dọc

.center-me {
  margin: 0 auto;
}

Liệu bạn có thể sử dụng flexbox?

Không có gì ngạc nhiên khi công việc này được thực hiện một cách dễ dàng với flexbox

.center-me {
  margin: 0 auto;
}

3. Cả hai chiều ngang và chiều dọc

Bạn có thể sử dụng kết hợp những kỹ thuật căn bản giữa chiều ngang và chiều dọc ở trên để đạt được điều này tuy nhiên bạn có thể sử dụng những kỹ thuật dưới đây

Phần tử đó có chiều rộng và chiều cao cố định không?

Sử dụng lề âm có giá trị tuyệt đối đối với một nửa chiều rộng và chiều cao của phần tử đó sau khi bạn định vị nó kiểu tuyệt đối với trên cùng và 50% còn lại sẽ căn cứ giữa nó một cách hoàn hảo trên nhiều trình duyệt

.center-me {
  margin: 0 auto;
}

Bạn không biết chiều rộng và chiều cao của phần tử đó?

Bạn có thể sử dụng thuộc tính biến đổi để chuyển phần tử đó một khoảng bằng một nửa chiều cao của nó lên trên và một nửa chiều rộng của nó sang trái để đạt được kết quả tương tự như trên