Làm thế nào để căn giữa (center) một phần tử HTML hoặc hình ảnh trong CSS?

Khi bạn thiết kế website các phần tử mặc định đều nằm sang bên trái.  Nhưng nếu bạn biết một chút về CSS hoàn toàn có thể chỉnh sửa canh giữa theo ý của mình.

Bài viết này giúp bạn biết cách chỉnh sửa center cho trang web đẹp mắt hơn.

Đối với text như H1, H2, H3, H4, H5, H6 và p thì bạn có thể dùng

text-align: center;

<html>
<head>
<style>
.tieude {
text-align: center;
border: 1px solid red;
}
</style>
</head>
<body>
<h1 class="tieude">Đây là tiêu đề</h1><br>
</body>
</html>

Căn giữa trong CSS

Đối với phần tử HTML và hình ảnh bạn sẽ cần dùng đến

display: block;
margin: 0 auto;

Đoạn code để bạn test thử (Test trên W3SCHOLL)

<html>
<head>
<style>
.cangiua {
width: 200px;
height: 200px;
background: green;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="cangiua"></div>
</body>
</html>

Căn giữa trong CSS
Kết luận: Thông thường chúng ta khi căn giữa sẽ dùng đến margin: 0 auto; nhưng trong nhiều trường hợp nó sẽ không có tác dụng chính vì thế bạn cần dùng đến những code mình đã hướng dẫn ở trên.