Canh giữa nội dung thẻ div bất kỳ

Trước đây, để canh giữa 1 khối theo chiều ngang hoặc dọc, phải dùng rất nhiều thủ thuật. Nhưng từ khi css3 ra đời, đã bổ sung thuộc tính display:box, khiến việc canh giữa dễ dàng hơn.
Điều kiện đầu tiên bắt buộc là bạn phải xác rộng chiều rộng và chiều cao của box cần canh giữa. Nếu bạn không xác định, việc hiển thị sẽ bị sai lệch tùy theo cách hiển thị của trình duyệt (như Firefox, Chrome).

Khi không xác định chiều rộng:

Hiển thị trên Google Chrome

Hiển thị trên Firefox

Hiển thị dòng chữ Hello World ở giữa thẻ div:

        <style type="text/css">
            .centerBox
            {        
                /* Firefox */
                display:-moz-box;
                -moz-box-orient:vertical;
                -moz-box-pack:center;
                -moz-box-align:center;

                /* Safari and Chrome */
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-box-pack:center;
                -webkit-box-align:center;

                /* W3C */
                display:box;
                box-orient:vertical;
                box-pack:center;
                box-align:center;
            }
        </style>
        <div style="margin: 5px; width: 250px; border: solid 1px; height: 100px;">
            <div class="centerBox" style="height: 100px;">Hello World</div>
        </div>        
        <div style="margin: 5px; width: 250px; border: solid 1px; height: 100px;">
            <div class="centerBox" style="height: 100px; width: 250px;">Hello World</div>
        </div>

Giải thích:

Thuộc tính box-align: Sắp xếp nội dung phần tử theo hướng vuông góc với hướng bố trí của nó.
Hướng bố trí phụ thuộc vào định hướng của phần tử (box-orient): ngang hoặc dọc. (vertical or horizontal)

box-align: start|end|center|baseline|stretch; 

Thuộc tính box-pack: căn lề thẻ div dựa theo giá trị box-orient (theo chiều ngang hay chiều dọc)

box-align: start|end|center|baseline|stretch

Bạn có thể xem ví dụ đầy đủ ở: http://jsfiddle.net/anbinhtrong/7zGQN/