Centering In CSS: Canh giữa nội dung theo chiều dọc

Ở phần 1, chúng ta đã bàn về cách canh giữa các phần tử theo chiều ngang. Các bạn đã thấy rằng việc canh giữa các phần tử hầu như đều có liên quan đến khái niệm Inline-Block trong CSS. Vậy thì trong phần 2 này chúng ta sẽ tìm hiểu cách canh giữa phần tử theo chiều dọc. Vậy nó sẽ như thế nào? Xin bật mí với các bạn rằng, nó sẽ tương tự như vậy. Do đó trong phần này ta sẽ chủ yếu nắm sơ lược về các trick chứ không đi sâu như phần 1 nữa vì các kiến thức này chủ yếu thuộc về CSS cơ bản.

Inline Element hoặc Inline-Block Element

Đầu tiên chúng ta sẽ tìm hiểu về cách canh giữa trên-dưới cho inline element. Với một ví dụ rất quen thuộc đó là canh giữa cho 1 dòng.

Trên một dòng

Tại sao tôi nói quen thuộc, đó là bởi vì đây là phần mà hầu hết các bạn thường hay đụng đến nhất nhưng đa phần là làm “chưa đúng cách”. Không ai xa lạ chính là thành phần “Menu” trong trang web.

Mỗi menu như vậy có khá nhiều item. Và mỗi item thường chỉ chiếm văn bản nằm trên một dòng. Đương nhiên là có thêm khoảng cách trên dưới cho dòng văn bản này. Trong trường hợp này ta sẽ dùng padding-top và padding-bottom để giải quyết.

Như ví dụ này, tôi có dùng cả thêm padding-left và padding-right để canh đều cho cả 2 bên của item. Và các bạn có thể thấy rằng, các phần tử bên trong menu đã được canh đều trên dưới chỉ với padding. Sẽ có một số bạn sử dụng margin nhưng tôi khuyến khích các bạn nên hạn chế. Vì margin sẽ ảnh hưởng đến phía ngoài phần tử sẽ khó kiểm soát hơn padding trong trường hợp này.

Hoặc các bạn có thể sử dụng line-height thay thế cho padding-top và padding-bottom. Tuy nhiên bạn phải chắc chắc rằng mình phải thiết lập chiều cao cố định cho phần tử.

Trên nhiều dòng

Trong một số trường hợp các phần tử có một đoạn văn bản gồm nhiều dòng thì cách dùng padding sẽ chỉ có hiệu quả trên một phần tử mà thôi. Còn line-height nếu sử dụng trên nhiều dòng cũng sẽ không cho hiệu quả. Do đó ta sẽ sang một trick mới nữa là sử dụng display với table và table-cell. Với trick này, các bạn chỉ cần nắm rõ quy tắc: phần tử cha là table, phần tử con là table-cell và vertical-align là middle là được.

Trong ví dụ trên, tôi cố định chiều rộng của từng cột đều nhau để các bạn có cái nhìn rõ hơn. Nếu không cố định chiều rộng, mặc định các cột sẽ tự canh đều như đang trong một table thực sự vậy.

Block Element

Đây là một phần khá thú vị vì các trick ở đây sẽ giải quyết hầu hết các trường hợp mà bạn đang mắc phải. Giờ ta sẽ bắt đầu với cách canh giữa trên-dưới với một block element có chiều cao cố định.

Biết chính xác chiều cao của phần tử.

Việc biết chính xác chiều cao sẽ làm cho những con số sau trở nên dễ thở hơn. Vì trick này yêu cầu bạn phải động não tính toán một chút. Bây giờ ta sẽ bắt đầu với việc canh giữa trên-dưới cho một thẻ div có chiều cao 120px. Bên trong một div có chiều cao là 300px chẳng hạn. Và quy tắc cho trick này bao gồm 2 phần:

Nếu bạn đã thiết lập box-sizing: border-box cho các phần tử rồi thì chỉ cần nhớ: phần tử cha sẽ là relative. Phần tử con sẽ là absolute với top: 50% và margin-top bằng giá trị âm của một nửa chiều cao hiện tại của phần tử con.

Như ví dụ này, nếu height của phần tử con là 120px thì margin-top sẽ có giá trị -60px. Tức là bằng giá trị âm của một nửa chiều cao. Hãy để ý ở đây phần tử con đã được thiết lập nhưng chiều cao sẽ không bị ảnh hưởng bởi box-sizing: border-box. Vậy là xong cho phần thứ nhất.

Còn nếu bạn chưa thiết lập box-sizing: border-box thì  hãy nhớ một điều. Khi thiết lập giá trị padding-top và padding-bottom là bao nhiêu thì phần margin-top sẽ cộng thêm một nửa của 2 phần padding này vào.

Ví dụ, nếu ta sử dụng padding: 20px tương đương top và bottom là 20px thì ta phải cộng thêm 20px ( 1/2 của tổng top-bottom) này vào cho margin-top: -60px để trở thành -80px. Chỉ đơn giản như vậy thôi. Tuy vậy, trick hình như ít được áp dụng. Lý do là thông thường chúng ta sẽ thiết lập box-sizing mặc định cho các phần tử là border-box.

Không biết chính xác chiều cao của phần tử

Lúc này quy tắc sẽ dễ dàng hơn nhiều: phần tử cha là relative. Còn phần tử con là absolute với top: 50% và transform: translateY(-50%).

Thuộc tính transform với giá trị như ở đây sẽ di chuyển phần tử xuống 50% theo chiều dọc. Và như vậy chúng ta cũng đã tìm hiểu hầu hết các trick với các trường hợp cụ thể rồi. Tuy nhiên, như đã trình bày, chúng ta có thể bị nhầm lẫn.

Kết luận

Qua ví dụ này, có lẽ các bạn đã nắm được cách một phần tử canh giữa trên-dưới như thế nào rồi. Ngoài các trick này còn có một trick sử dụng flexbox. Tuy nhiên đây là không còn là một trick bình thường nữa. Lúc này nó có liên quan đến cả phần layout của trang. Vì thế nên trong giới hạn tôi sẽ không đề cập đến. Mong rằng các bạn sẽ áp dụng được một chút gì đó thông qua tutorial này. Phần cuối cùng chúng ta sẽ áp dụng phối hợp cả hai phần trước đây. Tức là canh giữa trên-dưới và trái-phải để có thêm cái nhìn tổng quát hơn. Giờ thì nghỉ ngơi xíu đi nhé các bạn.