Center Align Elements
Để căn giữa một element block theo chiều ngang (như <div>), hãy sử dụng margin: auto;
Đặt chiều rộng của element sẽ ngăn element kéo dài ra các cạnh của container.
Sau đó, element sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa hai bên:
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; }Lưu ý: Căn giữa không có hiệu lực nếu thuộc tính width không được đặt (hoặc được đặt thành 100%).
Center Align Text
Để chỉ căn giữa văn bản bên trong một element, hãy sử dụng text-align: center;
.center { text-align: center; border: 3px solid green; }
Center Align Image
Để căn giữa một hình ảnh, hãy đặt marign left và right thành auto và biến nó thành một element block:
img { display: block; margin-left: auto; margin-right: auto; width: 40%; }
Left và Right Align - Sử dụng position
Một phương pháp để căn chỉnh các element là sử dụng position: absolute;:
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; }
Left và Right Align - Sử dụng float
Một phương pháp khác để căn chỉnh các element là sử dụng thuộc tính float:
.right { float: right; width: 300px; border: 3px solid #73AD21; padding: 10px; }
Center Vertically - Sử dụng padding
Có nhiều cách để căn giữa một element theo chiều dọc trong CSS. Một giải pháp đơn giản là sử dụng padding top và bottom:
.center { padding: 70px 0; border: 3px solid green; }Để căn giữa theo cả chiều dọc và chiều ngang, hãy sử dụng padding và text-align: center:
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
Center Vertically - Sử dụng line-height
Một mẹo khác là sử dụng thuộc tính line-height với giá trị bằng thuộc tính height:
.center { line-height: 200px; height: 200px; border: 3px solid green; text-align: center; } /* If the text has multiple lines, add the following: */ .center p { line-height: 1.5; display: inline-block; vertical-align: middle; }
Center Vertically - Sử dụng position & transform
Nếu padding và line-height không phải là tùy chọn, thì một giải pháp khác là sử dụng position và thuộc tính transform:
.center { height: 200px; position: relative; border: 3px solid green; } .center p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Center Vertically - Sử dụng Flexbox
Bạn cũng có thể sử dụng flexbox để căn giữa mọi thứ. Chỉ cần lưu ý rằng flexbox không được hỗ trợ trong IE10 và các phiên bản trước đó:
.center { display: flex; justify-content: center; align-items: center; height: 200px; border: 3px solid green; }