Centering In CSS: Canh giữa phần tử cả chiều dọc và ngang

Canh giữa phần tử là kỹ thuật mà tôi đã có dịp trình bày với các bạn thông qua hai bài viết. Cụ thể là canh giữa phần tử theo chiều dọc và canh giữa phần tử theo chiều ngang. Trong nội dung này, tôi sẽ trình bày phần cuối cùng của kỹ thuật canh giữa phần tử. Kỹ thuật giúp chúng ta canh giữa một phần tử cả về chiều dọc lẫn chiều ngang. Bật mí tiếp với các bạn, các kỹ thuật này cũng tương tự như hai phần vừa rồi mà thôi.

Canh giữa khi biết chính xác chiều rộng và chiều cao của phần tử

Các quy tắc cần nắm

Khi đã biết chính xác chiều rộng và chiều cao của phần tử mà ta cần canh giữa cả chiều dọc và chiều ngang. Ở đây, để ngắn gọn, tôi sẽ gọi là canh giữa bốn phía. Ta chỉ cần sử dụng hai thuộc tính position và margin cho chúng là xong. Nhưng cụ thể như thế nào? Quy trình sẽ bao gồm 3 bước chính:

1. Thiết lập position relative cho phần tử cha chứa nó.
2. Thiết lập position absolute cho phần tử cần canh giữa 4 phía.
3. Thiết lập giá trị left và top của phần tử cần canh đều thành 50%. Đồng thời thiết lập margin-left và margin-top là giá trị âm của một nửa chiều rộng và chiều cao tương ứng.

Vẫn còn hơi quá khó hình dung phải không? Giờ ta sẽ đi vào ví dụ cụ thể để các bạn hiểu rõ quy trình này.

Ví dụ cụ thể

Ví dụ ta sẽ canh đều 4 phía cho một thẻ div màu đỏ bên trong khung chứa màu xanh. Thẻ div màu đỏ này sẽ có kích thước là 100x200px. Còn thẻ div màu xanh sẽ có chiều cao là 300px.

Ta tiếp tục thực hiện gán position cho hai thẻ div. Đồng thời điều chỉnh top và left thành 50% cho thẻ div màu đỏ. Đương nhiên, sau khi thực hiện xong, thẻ div màu đỏ sẽ rơi ra ngoài như thế này. Lúc này, thuộc tính margin sẽ giải quyết vấn đề còn lại.

Ta sẽ gán giá trị cho thuộc tính margin-left bằng giá trị âm của một nửa chiều rộng. Và margin-top bằng giá trị âm của một nửa chiều cao. Lúc này ta sẽ có thẻ div màu đỏ được canh đều 4 phía như thế này:

Ở đây có hai lưu ý dành cho các bạn. Thứ nhất, nếu ta không sử dụng left và top mà sử dụng bottom và right thì ta sẽ sử dụng margin-bottom và margin-right tương ứng để thiết lập. Thứ hai, nếu thẻ div màu đỏ có thêm padding thì phần margin ta sẽ phải cộng thêm giá trị padding đó vào. Vì lúc này chiều rộng và chiều cao của phần tử đã thay đổi. Nếu không, các bạn có thể sử dụng thuộc tính box-sizing để padding không ảnh hưởng đến chiều rộng cũng như chiều cao của phần tử.

Vậy là chúng ta đã giải quyết xong trường hợp đầu tiên. Giờ sẽ đến trường hợp thứ hai

Canh giữa khi không biết chính xác chiều rộng và chiều cao của phần tử

Lúc này cũng tương tự như trường hợp đầu tiên nhưng sẽ đơn giản hơn một chút là chúng ta không cần phải tính toán giá trị margin. Thay vào đó các bạn chỉ cần sử dụng thuộc tính transform với giá trị translate là -50% cho cả hai phía.

Sử dụng Flexbox

Flexbox là một kiểu dàn trang mới trong CSS. Ở đây tôi sẽ không đi sâu chi tiết vào khái niệm cũng như cách sử dụng của nó. Tôi sẽ đề cập đến cách ứng dụng nó trong việc canh giữa 4 phía cho phần tử. Với ví dụ trên, ta không cần phải sử dụng position hay margin nữa. Cũng không quan tâm là phần tử cần canh đều có kích thước cố định hay là không. Chúng ta chỉ việc thêm vào cho thẻ div màu xanh các giá trị CSS sau:

.blue {
display: flex;
justify-content: center;
align-items: center;
}

Tổng kết

Vậy là tôi đã giới thiệu xong các phương pháp để các bạn có thể canh giữa một phần tử hiệu quả nhất có thể khi làm việc với CSS. Đương nhiên các phương pháp này đã được kiểm chứng. Tuy vậy có một lưu ý là khi canh giữa hay đảm bảo rằng phần tử bên trong có kích thước bé hơn phần tử chứa nó. Có như vậy, việc canh đều mới có thể thực hiện được. Mong rằng qua loạt bài hướng dẫn này, đã giúp ích phần nào cho các bạn trong quá trình tìm hiểu về kỹ thuật canh đều trong CSS. Sẽ còn vui hơn nếu các bạn áp dụng nó thành công. Giờ thì thư giãn tý thôi nào