VA

MeStuff

Connect

GithubLinkedinSkype

All Posts

[DOM] Các thông số kích thước, vị trí của phần tử

01-05-2024

[MDX] Dư thừa thẻ HTML khi dùng với JSX

06-11-2022

[CSS] Center a div

03-03-2022

[WEB SERIES] Mật mã hóa khóa công khai

12-01-2022

[CSS] Một vài thuộc tính CSS

02-01-2022

[TS] Ghi chú dành cho TypeScript từ một Javascript developer

20-11-2021

[CSS] Vài mảnh CSS

07-11-2021

[JS] Hiện thực debounce function

31-10-2021

[CSS] Phân biệt items vs content trong Grid, Flex

31-10-2021

[CSS] Center a div

[CSS] Center a div

03-03-2022

Center a div

Làm web thì hẳn ai cũng sẽ phải center element sử dụng CSS, còn nhớ năm nào mình đi phỏng vấn VNG và được hỏi có bao nhiêu cách để center 1 cái div trong 1 cái div. Mình ngồi cười và sau đó đứng dậy đi về.

Giỡn chút vậy, mình sẽ thử liệt kê những cách mà mình biết.

Giả sử chúng ta chúng ta có HTML như này:


<div class="container">
<div class="element">Element</div>
</div>

Với ràng buộc rất đơn giản, container và element có những CSS cơ bản phía dưới. Hãy center element trong container, có thể chỉnh sửa HTML và CSS tùy ý, miễn sao ra kết quả.


.container {
padding: 16px;
width: 100%;
height: 200px;
background: blue;
}
.element {
padding: 16px;
background: green;
}

Output mong đợi sẽ như thế này:

Element

Cách 1: Sử dụng flex

Cách quá rõ ràng cho một CSS engineer.


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

Kết quả:

Element

Cách 2: Sử dụng flex kèm margin auto

Cách có thể sử dụng trong một số trường hợp mà cách trên gây bug, hy vọng một ngày bạn sẽ gặp cho biết.


.container {
display: flex;
}
.element {
margin: auto;
}

Kết quả:

Element

Cách 3: Sử dụng grid với *-content


.container {
display: grid;
justify-content: center;
align-content: center;
/* tương đương place-content: center; */
}

Kết quả:

Element

Cách 4: Sử dụng grid với *-items


.container {
display: grid;
justify-items: center;
align-items: center;
/* tương đương place-items: center; */
}

Kết quả:

Element

Cách 5: Sử dụng grid như flex


.container {
display: grid;
justify-content: center;
align-items: center;
}

Kết quả:

Element

Cách 6: Sử dụng grid như flex nhưng ngược lại


.container {
display: grid;
justify-items: center;
align-content: center;
}

Kết quả:

Element

Cách 7: Sử dụng position


.container {
position: relative;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Kết quả:

Element

Cách 8: Sử dụng display inline-block

Cách này yêu cầu phải sửa HTML một chút.


<div class="container">
<div class="element">Element</div>
<div class="sibling"></div>
</div>


.container {
text-align: center;
}
.container > div {
vertical-align: middle;
display: inline-block;
}
.sibling {
width: 0;
height: 100%;
}

Kết quả:

Element

Cách 9: Sử dụng display table, inline-block


<div class="container-wrapper">
<div class="container">
<div class="element">Element</div>
</div>
</div>


.container-wrapper {
display: table;
width: 100%;
}
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
}
.element {
display: inline-block;
}

Kết quả:

Element

Cách 10: Sử dụng grid template


.container {
display: grid;
grid-template-areas:
'. . .'
'. element .'
'. . .';
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
}
.element {
grid-area: element;
}

Element

Lời kết

Tùy trường hợp mà ta lại sử dụng những cách khác nhau cho mục đích center element: nội dung động, nhiều phần tử, position fixed,...

Đối với grid justify/align-items/content, bạn có thể đọc lại bài này để hiểu sự khác biệt: http://lehuuvietanh.com/short/content-vs-items-css/