1. Canh giữa thẻ div kiểu 1 :
 
<style>
.box{
background:#333;
width: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;
}
</style>
<div class="box">
<img src="link hình" >
</div>

2. Canh giữa thẻ div kiểu 2 :

<style>
* {margin:0;padding:0}
#container {
border: 2px solid blue;
position: relative;
width: 400px;
height: 300px;
background: url(http://i2.wp.com/webfaver.com/wp-content/uploads/2015/07/square.png) no-repeat center center;
}
#box {
border: 2px solid red;
position: absolute;
width: 80px;
height: 160px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
</style>
<div id="container">
<div id="box"></div>
</div>

3. Canh giữa thẻ div kiểu 3 :

<style>
#outer {
display: block;
/* border */
border: 1px solid red;
}
#inner {
margin: 0 auto;
/* border & width */
border: 1px solid #333
width: 100px;
}
</style>
<div id="outer" style="border: 1px solid red;">
<div id="inner" style="border: 1px solid #333; width: 100px">Inner</div>
</div>


MỤC LỤC: Nội dung bài viết  [Ẩn/Hiện]

Post a Comment

Mới hơn Cũ hơn

Xe máy điện Xmen GT Nijia 2018 thể thao năng động (Trắng phối xanh)
Đi tới nơi bán

Xe máy điện Terra Xmen Blade khung thép hợp kim (Xanh lá cây)
Đi tới nơi bán