Thủ thuật canh giữa mọi đối tượng với css

Một trong những việc khiến bạn cảm thấy khó khăn nhất đó là canh giữa trong css. Thông thường chúng ta thường sử dụng margin:0 auto; để canh giữa chiều ngang cho đối tượng sử dụng, tuy nhiên nếu để canh giữa theo chiều dọc cho đối tượng đó nữa thì lại không được.

Có rất nhiều cách cũng như thủ thuật có sẵn trên mạng hướng dẫn các bạn canh giữa đối tượng cả về chiều ngang lẫn chiều dọc, nhưng 2 thủ thuật mà mình chia sẻ bên dưới sẽ không làm bạn thất vọng vì nó có thể canh giữa tuyệt đối mà không ngại gặp vấn đề với bất kì trình duyệt phổ biến nào hiện nay.

Giả sử chúng ta chúng ta cần canh giữa một hình ảnh bên trong một thẻ <div> chúng ta sẽ thử bằng 2 cách như sau :

Cách 1 :

HTML

<div class="wraptocenter"><span></span><img src="images/1.jpg" ></div>

Và để canh giữa hình ảnh, các bạn dùng đoạn CSS như sau :

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    awidth: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/**//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    awidth: 1px;
}
/**/
</style>
 

Cách 2 :

HTML

<div class="box">
	<img src="images/1.jpg" >
</div>

Và đoạn css sẽ như sau :

.box{
	background:#333;
	awidth:400px;
	height:400px;
	padding:10px;
	color:#fff;
	margin:0 auto;
	position:relative;
}

.box img{
	margin:auto;
	position:absolute;
	top:0; left:0; right:0; bottom:0;
}

Trong cách này các bạn chỉ cần chú ý đến phần định dạng .box img{ …} vì đây chính là chìa khóa cho việc canh giữa đối tượng.

Đây chính là 2 cách mà mình thấy canh giữa tốt nhất, nếu bạn nào có cách hay hơn thì đừng ngần ngại chia sẻ cho mình và mọi người nhá.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster