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

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

Phan Nhật Chánh

Chánh08 tháng 08, 2021

3 min read
·
•••views
·
•••likes

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 grid và place-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;
}
.container {
  display: grid;
  place-content: center;
}

Flex và margin-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: automargin: auto

.container {
  display: flex;
}
 
.container > * {
  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: absoluteposition: 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

Khi sử dụng class="element" nếu bạn sử dụng lại class="element" thì nội dung sẽ bị xếp chồng lên nhau.

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

🏆 flex, align-items và justify-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-items và justify-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: rowflex-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: columnflex-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;
}
.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;display: flex;, align-items: center;align-items: center; và justify-content: 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>
<!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%height: 100% và html và body.

html, body { height: 100%; } /*Thay đổi chiều cao của phần tử mẹ*/
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>
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 🍒

•••