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.

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

Đố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
;
}

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

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: 
100
px
;
            height: 
100
px
;
            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ẹ*/

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: 
100
px
;
            height: 
100
px
;
            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 🍒

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

mtoplist