Cách tốt nhất để căn giữa các phần tử trong CSS

Nếu bạn cảm thấy rất khó khăn trong việc căn giữa nội dung của một phần tử theo chiều dọc hoặc chiều ngang bằng cách sử dụng CSS. Dưới đây là một số cách khác nhau để sắp xếp nội dung vào trung tâm bằng cách sử dụng CSS.

Sử dụng gridplace-content

Việc sử dụng grid để căn giữa các elements trong một khối dữ liệu div thật dễ dàng. Nó dễ nhớ và hoạt động tốt đối với các layout lớn.

.container {
  display: grid;
  place-content: center;
}

Flexmargin-auto

Đối với các phần tử nhỏ như logo, có một cách đơn giản để căn giữa các mục nên sử dụng flex cùng với margin: auto

.container {
  display: flex;
}

.container > * {
  margin: auto;
}

Với position: absolute

Giải pháp này dựa trên việc sử dụng position: absolute để căn giữa phần tử ở trung tâm. Cách này được sử dụng class trực tiếp trên phần tử mà bạn muốn căn giữa chứ không phải toàn bộ vùng div

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

🏆 flex, align-itemsjustify-content

Giải pháp tốt nhất, đúng đắn nhất và chính xác nhất được thiết kế cho việc này là sử dụng thuộc tính flex cùng với align-itemsjustify-content để căn chỉnh các items trong một vùng chứa div.

  • align-items xác định hành vi của các items thông qua trục đối diện với trục chính (nếu flex-direction: row thì nó sẽ là các hàng).
  • justify-content xác định sự liên kết và phân bố của các items trên trục chính (nếu flex-direction: column thì đó sẽ là các cột).
  • Bạn có thể tham khảo thêm tại đây.
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

Ví dụ: Giả sử bạn muốn căn chỉnh một div chiều ngang nằm ở trung tâm của phần tử mẹ. Bạn cần áp dụng thuộc tính display: flex; align-items: center; justify-content: center; cho phần tử mẹ.

<!DOCTYPE html>
<html>
    <head>
        <title>Center Align Content</title>
    </head>
    <style>
        body{
            margin: 0;
        }
        .container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
    <body>
        <div class="container">
            <div class="box"></div>
        </div>  
    </body>
</html>

Giả sử bạn muốn căn chỉnh theo chiều dọc và chiều ngang (vào trung tâm của phần tử mẹ) thì bạn chỉ việc thêm thuộc tính height: 100%htmlbody.

html, body { height: 100%; } /*Thay đổi chiều cao của phần tử mẹ*/

Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>center align content</title>
    </head>
    <style>
        html, body {
            height: 100%;
        }
        body{
            margin: 0;
        }
        .container {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
        }
    </style>
    <body>
		<div class="container">
            <div class="box"></div>
		</div>  
    </body>
</html>

Hy vọng với chủ đề này, từ bây giờ bạn sẽ không gặp vấn đề gì khi căn giữa các phần tử với CSS 🍒

Đăng ký nhận bản tin!

Tôi sẽ gửi một email cho bạn khi tôi tạo ra một cái gì đó mới. Tôi sẽ không bao giờ gửi thư rác cho bạn 🙅‍♂️! và bạn có thể hủy đăng ký bất kỳ lúc nào.