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 `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;

}

Sử dụng `grid` và `margin`

.container {

  display: grid;

}



.container > * {

  margin: auto;

}

Sử dụng `flexbox`

.container {

  display: flex;

  justify-content: center;

  align-items: 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: 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

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%);

}

🏆 `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: 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; và 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% và html và body.

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

<!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 🍒

Sử dụng grid và place-content

Sử dụng grid và margin

Sử dụng flexbox

Flex và margin-auto

Với position: absolute

🏆 flex, align-items và justify-content