Đôi khi chúng ta gặp vấn đề khi căn giữa một phần tử trên trang web. Việc này có thực sự khó khăn không? Thực tế căn giữa không quá khó. Có rất nhiều cách khác nhau để thực hiện.
Một điều cần biết là kỹ thuật nào phù hợp cho mục đích gì. Khi hiểu rõ vấn đề việc chọn kỹ thuật tốt nhất sẽ dễ dàng hơn.
Chúng ta hãy xem xét một vài tình huống và thảo luận phương pháp tốt nhất để đạt mục tiêu.
- Theo chiều ngang
- Các phần tử inline
Chúng ta có thể dễ dàng căn giữa phần tử inline trong phần tử block-level như sau:
- Các phần tử inline
// Aligning text in center
.center
{
text-align: center;
}
- Các phần tử block level
Chúng ta có thể căn giữa phần tử block-level bằng cách đặt `margin-left` và `margin-right` thành `auto`. Lưu ý phần tử cần có chiều rộng xác định trước:
// Aligning an element of defined length in center
// Remember to define the width of the element otherwise it
//will be full width and 'auto' will not work
.center
{
margin: 0 auto;
width: 200px;
}
- Nhiều hơn một phần tử block level
Nếu có hai hoặc nhiều phần tử block-level cần căn giữa theo hàng ngang. Sử dụng **display** khác như **display: inline-block** sẽ hiệu quả hơn.
.parent
{
// Aligning the child of this parent in center
text-align: center;
}
.child
{
// set the display of child elements
display: inline-block;
text-align: left;
}
- Theo chiều dọc
- Các phần tử inline
Chúng ta có thể dễ dàng căn giữa một phần tử inline trong một phần tử block level như sau:
- Các phần tử inline
// Set the display of the parent class as table
.parent
{
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
// Set the display of the child class as table-cell
.child
{
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
- Các phần tử block level có chiều cao xác định
Chúng ta có thể dễ dàng căn giữa một phần tử inline trong một phần tử block level như sau:
// Set the position of the parent as relative to other
.parent
{
position: relative;
}
// Set position of the child as absolute in its parent class
// so that it can be placed anywhere in the parent class
.child
{
position: absolute;
top: 50%;
height: 100px;
/* responsible for padding and border
if not using box-sizing: border-box; */
margin-top: -50px;
}
- Các phần tử block level có chiều cao không xác định
Chúng ta có thể dễ dàng căn giữa một phần tử inline trong một phần tử block level như sau:
// Set position of child as absolute in its parent class
.parent
{
position: relative;
}
// Set top of the child 50% of viewport
// Translate the child by 50% of its height about
// negative y axis
.child
{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
- Cả theo chiều ngang & chiều dọc
- Phần tử có chiều cao và chiều rộng cố định
Sử dụng margin âm bằng một nửa chiều rộng và chiều cao phần tử đó. Sau khi bạn đã đặt vị trí tuyệt đối ở 50%/50% nó sẽ được căn giữa.
- Phần tử có chiều cao và chiều rộng cố định
// Set position of parent class as relative
.parent
{
position: relative;
}
// Set top and left of an element of
// known height as 50%
.child
{
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
- Phần tử có chiều cao và chiều rộng không xác định
Khi không biết chiều rộng hoặc chiều cao ta có thể sử dụng thuộc tính transform. Dùng giá trị translate âm 50% theo cả hai hướng để căn giữa:
// Set position of parent as relative to other
.parent
{
position: relative;
}
// Set top and left of an element of
// known height as 50%. Translate the
// element 50% of its height and width
// about negative x-axis and negative y-axis
.child
{
position: absolute;
top: 50%; //
left: 50%;
transform: translate(-50%, -50%);
}
Lưu ý: Toán tử '.' được sử dụng trong CSS để xác định một CSS class. Trong các ví dụ trên, class `parent` dùng để tạo kiểu cho phần tử cha. Class `child` dùng cho phần tử con.