Đối với những ai đã từng gặp phải tình huống muốn đưa một phần tử vào chính giữa của một phần tử khác hoặc là muốn căn giữa một phần tử theo chiều dọc thì chắc hẳn đã gặp phải một số khó khăn, nhất là khi độ cao của các phần tử này không được cố định trước. Nhưng nay, với sự bổ sung nhiều thuộc tính mới cho mô hình box trong CSS3 thì công việc này đã trở nên dễ dàng hơn bao giờ hết.

Trước tiên ta hãy xem ví dụ sử dụng thuộc tính box-align để căn giữa theo chiều dọc các thẻ con của một thẻ div. Trong trang html của mình, chúng ta có 2 thẻ div được lồng với nhau, công việc của chúng ta là cho thẻ div bên trong được hiển thị ở chính giữa thẻ div bên ngoài nó theo chiều dọc.

—————-
<head>
</head>
<body>
<div class="outer">
<div class="inner">Center this content</div>
</div>
</body>
</html>
—————

Ta tạo một khối stylesheet như sau để có thể quan sát dễ dàng vị trí của 2 thẻ div:

————
<style type="text/css">
.outer {
width: 350px;
height: 100px;
border: 1px solid black;
}

.inner{
height: 50px;
border:1px solid black;
}
</style>
————

Bây giờ ta thêm thuộc tính box-align cho thẻ div ở ngoài:
————-
<style type="text/css">

.outer {
width:350px;
height:100px;
border:1px solid black;
/* Dành cho Firefox */
display:-moz-box;
-moz-box-align:center;
/* Dành cho Safari and Chrome */
display:-webkit-box;
-webkit-box-align:center;

/* W3C */
display:box;
box-align:center;
}

.inner{
width:150px;
height:50px;
border:1px solid black;
}

</style>
————-
Và đây là kết quả:

Ở đoạn code trên ta có sử dụng 2 thuộc tính đó là: display và box-align. Thuộc tính display đã có ở CSS2 nhưng sang CSS3 thì nó được bổ sung thêm giá trị mới đó là box được dùng để chuyển thẻ outer thành dạng Flexible Box Model (tham khảo thêm tại đây). Thuộc tính box-align có thể nhận vào các giá trị start, end, center, baseline, stretch, trong đó giá trị centerđược dùng để căn giữa các thẻ con theo chiều dọc.

Bây giờ chúng ta sẽ thực hiện việc căn giữa thẻ div con theo chiều ngang bằng cách sử dụng thuộc tính box-pack. Thuộc tính box-pack có thể nhận vào các giá trị sau: start, end, center¸ justifytrong đó giá trị center được dùng để căn giữa thẻ con theo chiều ngang.
—————
<style type=”text/css“>

.outer {
width:350px;
height:100px;
border:1px solid black;
/* Dành cho Firefox */
display:-moz-box;
-moz-box-align:center;
-moz-box-pack:center;
/* Dành cho Safari and Chrome */
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
/* W3C */
display:box;
box-align:center;
box-pack:center;
}

.inner{
width:150px;
height:50px;
border:1px solid black;
}

</style>
—————
Và kết quả đạt được:

Lưu ý: Thuộc tính box-pack và box-align vẫn chưa được hỗ trợ hầu hết bởi các trình duyệt, Firefox thì hỗ trợ các thuộc tính để thay thế đó là –moz-box-pack và –moz-box-align. Safari và Chrome thì cung cấp –webkit-box-pack và -webkit-box-align. Với IE thì đành phải chờ các phiên bản tiếp theo vậy.

Tham khảo:

http://www.w3schools.com/cssref/css3_pr_box-align.asp

https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Có sử dụng ảnh của: http://roqeemdesign.wordpress.com/