元素垂直水平居中:
- 设置定位 结合translate一起使用
.big{
400px;
height:400px;
border:1px solid #ccc;
position:relative;
}
.small{
200px;
height:200px;
background-color:red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
<div class="big">
<div class="small">
</div>
</div>
- 设置定位absolute 上下左右都为0 设置margin:auto;
.big{
400px;
height:400px;
border:1px solid #ccc;
position:relative;
}
.small{
200px;
height:200px;
background-color:red;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
<div class="big">
<div class="small">
</div>
</div>
-
例如图片居中:
第一种:
.big{
400px;
height: 400px;
text-align: center;
border:1px solid #ccc;
}
.big img{
vertical-align: middle;
}
.big:after{
content:'';
display:inline-block;
vertical-align: middle;
height: 100%;
}
<div class="big">
<img src="mm.jpg" alt="" width="200">
</div>
第二种: display:table-cell属性指的是让标签元素以表格单元格的形式呈现,类似于td标签,但是ie6/7不支持此属性,在使用此属性的时候,float、position:absolute 尽量不要同时使用。可以设置高宽 padding值,但是margin没有反应。
.big{
400px;
height: 400px;
border:1px solid #ccc;
display:table;
}
.small{
display:table-cell;
text-align: center;
vertical-align:middle;
}
<div class="big">
<div class="small">
<img src="mm.jpg" width="200px"alt="">
</div>
</div>
第三种:类似第一种
.big{
400px;
height: 400px;
border:1px solid #ccc;
text-align: center;
}
img{
vertical-align: middle;
}
span{
height: 100%;
display:inline-block;
vertical-align: middle;
}
<div class="big">
<img src="mm.jpg" width="200px" alt="">
<span></span>
</div>