Canh giữa DIV với CSS

Có rất nhiều bài hướng dẫn canh giữa 1 phần tử DIV bất kỳ trong phần tử khác, nên hôm nay mình tóm tắt 1 trong số cách canh giữa phần tử DIV

Có 4 điểm cần lưu ý:

Dùng view port hay cho phần trăm: vh (viewport height), vw (viewport width), vmin (viewport minimum length) và vmax (viewport maximum length).
Do phần tử Parent chứa child element có thể ko phải phần tử bao trùm page, nên bạn sử dụng position fixed với top = left = 0
Sử dụng margin với giá trị < 0.
Để canh giữa, bạn chỉnh top = left = 50%

Tại sao phải dùng viewport?

Theo W3 Candidate Recommendation

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Với ViewPort, kích thước dựa vùng xem của bạn hơn là phần tử chứa element đó.

Margin với giá trị âm

Áp dụng cho trường hợp bạn muốn canh giữa cho toàn bộ containter:

This is by far the most common use case for negative margins. You give a container a padding so that its contents have some breathing space. However, you want the header to span the entire container, ignoring the padding. Negative margins are the way to go.

Ví dụ

HTML code

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="lib/script.js"></script>
  </head>
  <body>
    <h1>Spinner</h1>
    <div class="wrapper">
      <div class="overlay">
        <div class="spinner-wrapper">
          <div class="spinner-border text-success" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
      </div>
    </div>    
  </body>
</html>

CSS

.wrapper {
  height: 100vh;
  width: 100vh;
  top: 0;
  left: 0;
  /* Setup */
  position: fixed;
  opacity: 0.5;
  background: #d0e2e1;
}

.overlay {
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* Apply negative top and left margins to truly center the element */
}

Xem ví dụ tại đây

Nhật ký học tập

Tìm kiếm Blog này

Canh giữa DIV với CSS

Tại sao phải dùng viewport?

Margin với giá trị âm

Ví dụ

Nhãn

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

[ASP.NET MVC] Authentication và Authorize

ASP.NET MVC: Cơ bản về Validation

Tổng hợp một số kiến thức lập trình về Amibroker