Cách để căn giữa mọi thứ với CSS
Nếu bạn mới chỉ bắt đầu trên con đường sự nghiệp coding, và may mắn sao tôi lại có được sự chú ý của bạn trong vài phút…hãy lưu ngay bài viết này lại nhé!
Hãy thành thật với nhau nhé.
Đôi lúc trải qua quãng đời coding, chúng ta chợt nhận ra nhiều lúc quá mệt mỏi với việc căn giữa mọi thứ (tìm cách căn giữa thẻ div nằm trong 1 thẻ div khác trên Google hay Stack Overflow).
Nó có thể chỉ là một việc giản đơn, nhưng lại nhanh chóng trở thành nỗi mệt mỏi khi bạn thêm nhiều phần tử hay định dạng cho trang của mình.
Do đây cũng là một vấn đề khá bình thường, tôi soạn ra đây 1 danh sách các cách căn giữa với CSS. Tôi cũng đã thêm vào các thẻ nhúng/đường link với mỗi ví dụ trên CodePen. Hãy thoải mái chia sẻ chúng nhé!
View my CodePens here.
Không dài dòng thêm nữa, chiến thôi nào!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1, h3 {
text-align: center;
}
.blue-square-container {
text-align: center;
}
.blue-square {
background-color: #0074D9;
width: 100px;
height: 100px;
display: inline-block;
}
.yellow-square {
background-color: #FFDC00;
width: 100px;
height: 100px;
margin: 0 auto;
}
.green-square {
background-color: #3D9970;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<h1>Centering with CSS</h1>
<h3>Text-Align Method</h3>
<div class="blue-square-container">
<div class="blue-square"></div>
</div>
<h3>Margin Auto Method</h3>
<div class="yellow-square"></div>
<h3>Absolute Positioning Method</h3>
<div class="green-square"></div>
</body>
</html>
Căn giữa với Căn chữ, Lề tự động và Vị trí tuyệt đối
Phương pháp căn chữ
Sử dụng “text-align:center” có lẽ là cách thông dụng nhất để bạn căn giữa. Nó dùng để căn giữa chữ trong trang HTML của bạn, nhưng nó cũng có thể căn giữa cả thẻ div luôn đó.
Mẹo ở đây là:
- Bao gói thẻ div mà bạn muốn căn giữa trong một phần tử cha (hay còn gọi là một wrapper hay container)
- Đặt “text-align:center” vào phần tử cha
- Sau đó đặt bên trong thẻ div thuộc tính “display: inline-block”
Trong ví dụ của tôi với hình vuông màu xanh da trời, Tôi gói nó vào 1 thẻ div khác đặt tên là “blue-square-container”. Để có thể căn giữa hình vuông màu xanh da trời, tôi phải tạo một phần tử cha và đặt thuộc tính hiển thị của hình vuông màu xanh da trời là “inline-block”.
Đó là bởi vì mặc định một thẻ div sẽ hiển thị với thuộc tính “block”, nghĩa là nó sẽ giãn ra bằng cả chiều rộng của trang. Bằng cách đặt thuộc tính hiển thị thành “inline-block”, chúng ta sẽ chắc chắn rằng nó chỉ có chiều rộng mà ta đã đặt, ở đây là 100px.
Thêm bao nhiêu phần tử con vào trong phần tử cha (những hình vuông màu xanh da trời trong ví dụ) đều sẽ căn giữa chúng hết.
Phương pháp căn lề tự động
Một phương pháp đơn giản khác đó là sử dụng phương pháp căn lề tự động. Dùng nó ta sẽ không cần đến phần tử cha.
Chúng ta có thể đơn giản chỉ thêm thuộc tính “margin: 0 auto” cho hình vuông màu vàng, miễn là chúng ta đặt cho nó một chiều rộng đã định.
“margin: 0 auto” là cách viết tắt để đặt margin top và bottom là 0, và margin left và right là auto.
Điều này vô cùng quan trọng, bởi nếu không đặt chiều rộng là 100px, thì trình duyệt sẽ không thể biết được mà chia margin left và right cho phù hợp để căn giữa hình vuông màu vàng.
Phần “0” trong thuộc tính có thể đặt tùy ý theo số pixel mà bạn muốn đặt cho top và bottom margin.
Một mẹo hay nữa là chỉ cần đặt “margin-left: auto” hay “margin-right: auto” là chúng ta có thể đẩy thẻ div về phía phải hay trái hoàn toàn (thử đi nhé!)
Phương pháp vị trí tuyệt đối
Đặt một phần tử với vị trí tuyệt đối cho phép chúng đặt phần tử đó ở bất kì chỗ nào trên trang…với một điểm bất lợi.
Vị trí tuyệt đối loại bỏ phần tử khỏi dòng chảy của trang web.
Tại sao điều này lại quan trọng?
Bởi vì rằng nó sẽ gây chồng lấn các phần tử với nhau nếu sử dụng không đúng cách.
Nếu chúng ta chỉ muốn đơn giản căn giữa một phần tử theo chiều ngang của trang như là cách chúng ta làm với 2 phương pháp trên, có 3 bước nên ghi nhớ:
- Đặt vị trí phần tử với thuộc tính vị trí tuyệt đối
- Thêm thuộc tính “left:50%” vào phần tử
- Đặt margin left bằng một nửa chiều rộng phần tử
Trong ví dụ, chúng ta dùng một hình vuông màu xanh lá cây (đẹp xuất sắc). Nó có kích thước giống như các ví dụ khác là 100px.
Như bạn đã thấy, tôi thêm thuộc tính “position: absolute” và “left:50%” vào hình vuông màu xanh. Nó sẽ chỉ cho trình duyệt di chuyển lề trái dịch 50% về bên phải.
Nhưng nếu tôi tạo lại ví dụ, và ta không muốn để lề trái vào chính giữa, mà chính giữa của hình vuông sẽ thẳng hàng với chính giữa trang web.
Điều này sẽ dẫn ta tới bước cuối cùng. Để thẳng hàng mọi thứ và thêm khoảng trắng, ta sẽ áp một “margin-left” bằng nửa chiều rộng của hình vuông màu xanh. Trong trường hợp này là 50px (theo chiều rộng của phần tử, luôn luôn là một nửa)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.red-square {
background-color: #FF4136;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="red-square"></div>
</body>
</html>
Căn giữa với Transform/Translate
Phương pháp Transform/Translate
Cho tới lúc này ta mới tìm hiểu cách để căn giữa mọi thứ theo chiều ngang, nhưng nếu chúng ta muốn đặt nó chính giữa 2 chiều của trang thì sao?
Hãy thử căn giữa theo cả chiều dọc lẫn chiều ngang xem sao.
Do phương pháp này cũng dùng vị trí tuyệt đối và “left:50%” tôi đã thêm 2 thuộc tính nữa vào trong phần tử.
Bằng cách đặt thuộc tính top là “50%”, tôi chỉ cho trình duyệt căn thẳng viền trên của hình vuông màu đỏ vào giữa trang theo chiều dọc. Nhưng như ví dụ trước, chúng ta không muốn viền được căn giữa mà là tâm của hình vuông vào giữa trang.
Đây là cách chúng ta áp dụng một thuộc tính mới đó là “transform”.
Sẽ có nhiều nhiều trò hay mà bạn có thể làm với transform, như là tịnh tiến, xoay hay cân chỉnh hiệu ứng động, nhưng trong ví dụ này chúng ta sẽ sử dụng tịnh tiến.
Chúng ta thêm thuộc tính cho transform “transform: translate(-50%,-50%)” và a lê hấp!
Hình vuông màu đỏ đã căn giữa theo cả chiều ngang lẫn chiều dọc.
Tôi vô cùng thích dùng phương pháp này bởi mặc cho chiều rộng hay cao của phần tử là bao nhiêu nó đều sẽ được căn giữa vào trang.
Phương pháp này thường được sử dụng trong thiết kế responsive và không cần đặt margin như là phương pháp vị trí tuyệt đối
Phương pháp Flexbox
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
}
.purple-square-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.purple-square {
background-color: #B10DC9;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="purple-square-container">
<div class="purple-square"></div>
</div>
</body>
</html>
Căn giữa với Flexbox
Nếu bạn chưa quen với Flexbox, cũng không sao cả! Flexbox là một module layout giúp chúng ta dễ dàng căn chỉnh và đặt các phần tử trong trang web.
Nếu bạn cảm thấy hứng thú với việc học Flexbox (khuyên chân thành học đê), Flexbox Froggy là một nơi tuyệt vời và siêu vui để học (không ép buộc gì đâu chỉ là tôi đã từng học về Flexbox và đã iu em nó mất rồi).
Có 4 bước để căn giữa cả ngang lẫn dọc với Flexbox là:
- HTML, body hay phần tử cha phải đặt chiều cao là 100%.
- Đặt “display: flex;” cho phần tử cha.
- Đặt “align-items: center;” cho phần tử cha.
- Đặt “justify-content: center;” căn đều 2 bên vào giữa phần tử bao gói cha.
Tôi cũng thích dùng cách này, nó đều thoả mãn responsive và lại không cần tính toán margin.
Tôi mong rằng bạn thấy bài này khai sáng và giúp đỡ bạn. Tôi luôn mong đón nhận những ý kiến phản hồi nhé! 😄
Link bài viết gốc: https://medium.freecodecamp.org/how-to-center-things-with-style-in-css-dc87b7542689.
Tác giả:
Stephen Sun Follow
Software developer at Moblize, creating SaaS applications for the oil & gas industry.
Dịch giả: Togahepi a.k.a Hà Hiệp.
Khóa học Web Frontend cho người mới bắt đầu của Techmaster - tại đây
Bình luận