Canh giữa theo chiều dọc css : 8 cách để căn giữa dom theo chiều dọc

Nếu bạn là bạn mới học tập CSS chắc hẳn rằng sẽ rất hoa mắt khi cân nặng giữa các bộ phận trong HMTL.

Bạn đang xem: Canh giữa theo chiều dọc css

Và cũng rất có thể cũng gặp gỡ trường hợp làm được, trường vừa lòng không.

Hướng dẫn này để giúp bạn làm rõ từng ngôi trường hợp.

Từ đó rất có thể căn giữa hầu hết thể loại thành phần HTML bằng CSS.

Bắt đầu nào!

Căn thân trong CSS theo hướng ngang

Để căn thân theo chiều ngang vào CSS khá đơn giản, chúng ta cũng có thể thực hiện nay theo 3 giải pháp sau đây:

Căn thân với trực thuộc tính text-align:center;

Trường hợp các bộ phận block rất có thể sử dụng trực thuộc tính display: inline-block; để đưa đổi.

Ví dụ tiếp sau đây căn giữ lại chữ trong thẻ với căn giữa các thẻ vào thẻ

Căn giữa với thuộc tính margin:auto;

Sử dụng ở trong tính: margin: atuo; để căn giữa các phần tử block như:
, , , , ,…

Chỉ chuyển động khi nằm trong tính width được chỉ định và width phải bé dại hơn 100%.

Ví dụ căn thân thẻ với ở trong tính margin:auto;

Căn thân nhiều phần tử con trong thành phần cha

Trường hợp bạn có nhu cầu căn chỉnh tất cả thành phần con, hoàn toàn có thể áp dụng 2 ở trong tính display: flex; với justify-content: center; vào thành phần cha.

Hoặc hoàn toàn có thể sử dụng display:inline-block; để gửi chắc bộ phận con sang trọng inline-bock tiếp đến dùng trực thuộc tính text-align:center; vào thành phần cha.

Ví dụ căn thân các thành phần trong 2
sau:

Căn giữa trong CSS theo chiều dọc

Căn thân theo chiều dọc củ trong CSS phức hợp hơn đôi chút.

Những vẫn có khá nhiều các làm.

Phần tử chỉ có một dòng

Sử dụng trực thuộc tính line-height, thực hiện thêm ở trong tính white-space: nowrap; nếu như text có không ít dòng.

Hoặc thực hiện thuộc tính padding-top và padding-bottom với cái giá trị bằng nhau.

Xem demo ví dụ dưới đây:

Phần tử có rất nhiều dòng

Biết chiều cao của phần tử

Trường hợp biết chiều cao phần tử, chúng ta sử dụng ở trong tính position:absolute; kết phù hợp với top:50%; và margin-top (giá trị bằng âm nữa độ cao phần tử).

Position:absolute; yêu cầu bộ phận cha yêu cầu khác position:static;Top:50% để dịch chuyển thành phần xuống 50% theo đứng top của thành phần cha.Margin-top (giá trị bằng âm nữa độ cao phần tử) để dịch chuyển thành phần lên đúng chủ yếu giữa.

Không biết chiều cao của phần tử

Trường hợp do dự chiều cao bộ phận các bạn sử dụng thuộc tính position:absolute; kết phù hợp với top:50%; với transform: translate
Y(-50%);

Position:absolute; yêu thương cầu thành phần cha đề nghị khác position:static;Top:50% nhằm dịch chuyển thành phần xuống 50% theo vị trí cao nhất của phần tử cha.Transform: translate
Y(-50%); tương tự như như Margin-top (giá trị bằng âm nữa độ cao phần tử)

Tham khảo thêm ở trong tính position nhằm hiểu cách buổi giao lưu của nó.

Sử dụng flexbox

Sử dụng trực thuộc tính display:flex; với Align-items:center; cho thành phần cha.

Căn giữa cả chiều ngang và chiều dọc

Sử dụng ở trong tính position:absolute;

Các bạn thực hiện thuộc tính sau:

Position:absolute; yêu thương cầu bộ phận cha đề nghị khác position:static;Top:50%; nhằm dịch chuyển thành phần xuống dưới 50% theo top của phần tử cha.Left:50%; để dịch rời phần lịch sự phải 50% theo left của thành phần cha.Transform: translate(-50%, -50%); tương tự như Margin-top (giá trị bởi âm nữa chiều cao phần tử) và margin-left(giá trị bởi âm nữa chiều rộng lớn phần tử)

Tham khảo ví dụ bên dưới đây:

Sử dụng trực thuộc tính display:flex;

Các bạn sử dụng thuộc tính sau cho phần tử cha:

Display:flex;Justify-content:center;Align-items:center;

Sử dụng ở trong tính display:grid;

Thêm ở trong tính display:grid; vào thành phần cha

Và thêm trực thuộc tính margin:auto; vào bộ phận con.

Trường hợp gồm nhiều thành phần con

Nếu tất cả nhiều bộ phận con trong một phần tử cha:

Sử dụng position:absolute; rất có thể cân thân 1 hoặc nhiều bộ phận tùy ý(chỉ câu hỏi thêm thuộc tính vào những phẩn tử bạn có nhu cầu căn chỉnh)Sử dụng display:flex; chỉ hoàn toàn có thể căn giữa tất cả phần tử.Không thể áp dụng display:grid;

Tổng kết

Có nhiều phương pháp để căn giữa một hoặc nhiều thành phần trong CSS, tùy từng trường hợp các chúng ta cũng có thể chọn bí quyết làm phù hợp.

Sử dụng position:absolute; và display:flex; là 2 cách làm công dụng trong hầu hết trường hợp.

Bạn cũng có thể sử dụng position:absolute; để chỉnh sửa theo ý muốn. (Nhớ phần tử cha phải tất cả position khác giá trị static)

Vertical-align:

Đã bao nhiêu lần các bạn đã thử sử dụng vertical-align: middle; để thử căn giữa một DOM theo hướng dọc? mình thì ít nhất là chục lần!Thoạt nhìn thì có vẻ như logic, dẫu vậy loay hoay một dịp thì phát hiện nay nó chả hoạt động gì?!

Chắc các bạn (và mình) cũng đã từng nghĩ, tại sao căn giữa theo chiều ngang (khá) dễ dàng thì chiều dọc củ lại làm cạnh tranh mình vậy nhỉ???
Thực ra tôi cũng đ** phát âm lắm và có vẻ nhiều dev không giống cũng cảm xúc vậy! Và rất nhiều cách thức “work around” đã được nghĩ ra để xử lý (một biện pháp không triệt nhằm lắm) sự việc này, lấy ví dụ như: table, float, inline-block, position.

Hôm nay mình muốn cùng thử toàn bộ 8 cách (mà bản thân từng google với được biết) để xử lý việc căn giữa theo chiều dọc một DOM.

1. Line-height

Ghi nhớ là kỹ thuật này chỉ áp dụng cho 1 chiếc text

Hãy test với một vài cái html cùng css như sau:

html

id="element">Text
id="element-2">

css

#element background-color: #ddd; height: 150px; line-height: 150px;#element-2 background-color: #eee; height: 150px; line-height: 150px;#element-2 img height: 80px; vertical-align: middle;
Kết quả:

See the Pen line-height by Pho Huynh (
shortgiraffe4) on Code
Pen.

Chú ý: line-height phải to hơn font-size (và height của image).

Thường thì bạn không cần thiết phải set height của child element vày line-height sẽ đẩy chiều của của div lên tuy nhiên nếu không hoạt động hoặc cảm xúc không lạc quan thì set height nhé!

Với image chúng ta phải thêm 1 dòng vertical-align: middle nữa thì giải pháp này new hoạt động.

2. Table

html

id="parent">
id="child">Content
id="child-2">Content 2
css

#parent display: table; background-color: #ddd; width: 100%;#child display: table-cell; vertical-align: middle;#child-2 height: 150px;
Ở đây làm cho dễ hình dung mình sử dụng 1 div là #parent và 2 div là #child với #child-2.

Chỉ gồm #child là được căn thân thôi nhé!

Kết quả:

See the Pen Table by Pho Huynh (
shortgiraffe4) on Code
Pen.

3. Positioning và stretch technique

Hãy nhìn và đoạn code bên dưới đây:

html

id="parent">
id="child">
css

#parent position: relative; height: 150px; background-color: #eee;#child position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50%; height: 30%; margin: auto; background-color: cyan;
Ở đây trước tiên mình phối position của #parent với #child theo lần lượt là relative và absolute.

Sau đó mình sử dụng kỹ thuật stretch, set lần lượt top, right, bottom, left là 0 (thứ tự không quan trọng) thì #child sẽ tiến hành căn ở vị trí chính giữa #parent.

Kết quả:

See the Pen Positioning & stretch by Pho Huynh (
shortgiraffe4) on Code
Pen.

4. Padding top và padding bottom bằng nhau

Cách này chuyển động khá dễ dàng và đơn giản nhưng yêu cầu khá…khắt khe một tí.

Thử với code như sau:

html

id="parent">
id="child">
css#parent background-color: #eee; padding: 5% 0;#child height: 50px; background-color: cyan;

See the Pen Equal top và bottom padding by Pho Huynh (
shortgiraffe4) on Code
Pen.

Bạn thấy đó, dù chúng ta set padding của #parent# ra sao (chỉ cần top và bottom bằng nhau) thì chắc chắn rằng _#child sẽ được căn giữa.

Vì độ cao của của #parent vẫn giãn ra phụ thuộc vào #child và luôn luôn bằng padding-top + padding-bottom + height (của _#child_). Với padding-top === padding-bottom vì thế nó sẽ chính giữa thôi!

Vậy nếu như chiều cao của #parent không chỉ phụ thuộc vào 1 mình #child thì sao? Vậy thì sẽ xẩy ra 2 ngôi trường hợp:

Biết trước độ cao của #parent, vậy thì nên tìm một trong những padding thích hợp để height (của _#parent_) === padding-top + padding-bottom + height (của _#child_)) độ cao của #parent không thể xác định được vì phụ thuộc vào độ cao của một element khác, lấy một ví dụ #child-2. Vậy thì xác định là không dùng được biện pháp này!

5. Cần sử dụng một div floater rỗng

Cách này, hmm, hơi là “tricky”, thử với code sau:

html

id="parent">
id="float">
id="child">Child
css

#parent height: 250px; background-color: #eee;#float float: left; height: 50%; width: 100%; background-color: khaki; margin-bottom: -50px; position: relative; z-index: 1;#child clear: both; height: 100px; background-color: cyan; position: relative; z-index: 2;
Kết quả

See the Pen Floater div by Pho Huynh (
shortgiraffe4) on Code
Pen.

2 đk để cách này chuyển động đó là phải bao gồm một div rỗng nghỉ ngơi trước #child và phải xác minh được độ cao của #child, sau đó set margin-bottom của #float bằng âm 1 nửa độ cao của #child (-1/2 height).

Về phần position và z-index tôi chỉ làm cho các bạn nhìn rõ thôi chứ trong giải pháp này chỉ cần #float trống rỗng là được.

6. Inline-block và pseudo element

Cách này so với phương pháp 5 còn có khi…kỳ quặc hơn nữa:

html

div id="parent"> div id="child"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Excepturi labore nulla fugit sapiente obcaecati aliquid tenetur perferendis, quo unde quaerat dolores maiores nostrum ab? Et atque ex quibusdam magni corrupti. Div>div>
css

#parent position: relative; background-color: #eee; height: 300px;#parent::before content: ""; display: inline-block; height: 100%; width: 0; vertical-align: middle;#child display: inline-block; vertical-align: middle; width: 99%;
Kết quả

See the Pen Inline-block & pseudo element by Pho Huynh (
shortgiraffe4) on Code
Pen.

Cách này bản thân cần tạo nên một pseudo element (::before) với chiều cao bằng 100% của #parent, vị trí của chính nó sẽ là ngay đằng trước #child và giúp nó align.

Note: width của #child chỉ có thể bé dại hơn hoặc bởi 99% width của #parent, còn nếu không nó vẫn bị xuất kho khỏi #parent.

7. Flex-box

Những bí quyết trên phần nhiều là hack để có thể căn giữa, cơ mà flex-box được sinh ra, mục tiêu của nó có thể xem là muốn xử lý vụ căn giữa này!

Nhưng nhưng flex-box có không ít tính năng và phần nhiều là quá tinh vi so với việc chỉ dùng làm căn giữa thôi. đến mình cực tốt bạn hãy chi ra một ít thời gian để tò mò về đông đảo thứ xuất xắc ho của flex-box, bảo đảm giá trị luôn!

html

id="parent">
id="child">
css

#parent height: 200px; background-color: #eee; display: flex; justify-content: center; /** Căn giữa chiều ngang */ align-items: center; /* Căn giữa chiều dọc củ */#child width: 100px; height: 50px; background-color: cyan;
Kết quả

See the Pen Flexbox by Pho Huynh (
shortgiraffe4) on Code
Pen.

Cách này chuyển động với mọi kích thước của #parent cùng #child, nhưng nó không hỗ trợ mọi trình duyệt, chúng ta cũng có thể xem mọi trình duyệt hỗ trợ tại đây: https://developer.mozilla.org/en-US/docs/Web/CSS/flex.

Còn đó là full guide của flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

8. Grid

Grid (Grid layout) là một chức năng sinh ra để giải quyết và xử lý về…layout. Đây là cách cuối cùng của bài xích và cũng là bí quyết “chính thức” nhất dùng để làm căn thân theo chiều dọc.

html

id="parent">
id="child">
css

#parent height: 200px; background-color: #eee; display: grid; justify-items: center; /* Căn thân chiều ngang */ align-content: center;/* Căn giữa theo hướng dọc */#child width: 100px; height: 50px; background-color: cyan;
Kết quả

See the Pen Grid by Pho Huynh (
shortgiraffe4) on Code
Pen.

Xem thêm: Bán Thùng Carton Cũ Hà Nội, Bán Thùng Carton Cũ Mới Chuyển Nhà

Wow, trông có vẻ như giống flex-box. Tuy nhiên tính ra thì grid đơn giản hơn đối với flex-box, hoài nghi thì google nhé :D

Hỗ trợ trình duyệt: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout.

08 Aug 2018

« Webpack 4 từ bỏ cơ bạn dạng cho đến tạo project React thuộc ES6 để build production tạo ra proxy server với Google Compute Engine (GCE) »
Po"s Blog by Po

23/06/2023

Canh Giữa Theo Chiều Dọc Css : 8 Cách Để Căn Giữa Dom Theo Chiều Dọc

Căn thân trong CSS theo hướng ngang

Căn thân với trực thuộc tính text-align:center;

Căn giữa với thuộc tính margin:auto;

Căn thân nhiều phần tử con trong thành phần cha

Căn giữa trong CSS theo chiều dọc

Phần tử chỉ có một dòng

Phần tử có rất nhiều dòng

Căn giữa cả chiều ngang và chiều dọc

Sử dụng ở trong tính position:absolute;

Sử dụng trực thuộc tính display:flex;

Sử dụng ở trong tính display:grid;

Trường hợp gồm nhiều thành phần con

Tổng kết

Vertical-align:

1. Line-height

2. Table

3. Positioning và stretch technique

4. Padding top và padding bottom bằng nhau

5. Cần sử dụng một div floater rỗng

6. Inline-block và pseudo element

7. Flex-box

8. Grid