9.1 Canh giữa theo chiều ngang
Canh giữa các phần tử trên trang web là một trong những nhiệm vụ cơ bản của thiết kế web. Nó giúp tạo ra các bố cục dễ nhìn và dễ đọc. Dưới đây là các phương pháp canh giữa theo chiều ngang và chiều dọc của các phần tử, sử dụng các kỹ thuật CSS hiện đại.
1. Canh giữa các phần tử khối bằng margin: auto
Một trong những cách đơn giản nhất để canh giữa các phần tử khối là sử dụng margin: auto
.
Ví dụ:
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
<div class="centered-box"></div>
Giải thích mã:
margin: 0 auto;
: đặt lề tự động ở bên trái và phải, canh giữa phần tử theo chiều ngang
2. Canh giữa các phần tử dòng với text-align
Để canh giữa các phần tử dòng hoặc phần tử inline bên trong một phần tử khối, ta có thể sử dụng thuộc tính text-align: center
.
Ví dụ:
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
<div class="container">
<div class="inline-element">Phần tử dòng</div>
</div>
Giải thích mã:
text-align: center;
: canh giữa các phần tử inline bên trong container khối
3. Canh giữa phần tử với Flexbox
Flexbox cung cấp một cách đơn giản và linh hoạt để canh giữa các phần tử cả theo chiều ngang và chiều dọc.
Ví dụ:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Giải thích mã:
display: flex;
: thiết lập container dưới dạng Flexboxjustify-content: center;
: canh giữa các phần tử theo chiều ngangalign-items: center;
: canh giữa các phần tử theo chiều dọc (sẽ được xem xét chi tiết hơn sau)
9.2 Canh giữa theo chiều dọc
1. Canh giữa bằng Flexbox
Flexbox cung cấp một cách đơn giản để canh giữa phần tử theo chiều dọc.
Ví dụ:
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Giải thích mã:
align-items: center;
: canh giữa các phần tử theo chiều dọc
2. Canh giữa với CSS Grid
CSS Grid cung cấp khả năng mạnh mẽ để canh giữa các phần tử:
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="grid-container">
<div class="centered-box"></div>
</div>
Giải thích mã:
display: grid;
: thiết lập container dưới dạng CSS Gridplace-items: center;
: canh giữa các phần tử cả theo chiều ngang và dọc
3. Canh giữa theo chiều dọc với position tuyệt đối và CSS transform
Sử dụng position tuyệt đối và CSS transform cho phép canh giữa các phần tử theo chiều dọc.
Ví dụ:
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="container">
<div class="centered-box"></div>
</div>
Giải thích mã:
position: absolute;
: thiết lập phần tử ở vị trí tuyệt đối so với containertop: 50%;
,left: 50%;
: di chuyển phần tử 50% từ cạnh trên và trái của containertransform: translate(-50%, -50%);
: di chuyển phần tử 50% kích thước của nó để canh giữa
4. Canh giữa theo chiều dọc với bảng và ô
Sử dụng bảng và ô để canh giữa các phần tử theo chiều dọc.
Ví dụ:
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
<div class="table-container">
<div class="table-cell">
<div class="centered-box">Phần tử đã được canh giữa</div>
</div>
</div>
Giải thích mã:
.table-container
: tạo ra container với displaytable
.table-cell
: tạo ra ô bảng với căn giữa theo chiều dọcmiddle