1、固定图片大小水平垂直居中,图片300*200 如下:
html代码
<div class="con">
<img src="images/fengche.png" alt="">
</div>
css代码
.con{
width: 40%;
height: 300px;
margin:50px auto;
border: 1px solid red;
/*子元素是行内块时候 可以通过text-align center 设置水平居中*/
text-align: center;
}
img{
width: 200px;
height: 200px;
/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*/
line-height: 300px;
/*margin:100px auto;*/
}
效果如下
发现水平方向可以通过text-align center 设置水平居中,但是垂直方法无法居中,怎么办呢。img 属于行内块元素,支持所有元素,利用margin-top让它垂直居中。
.con{
width: 40%;
height: 300px;
margin:50px auto;
border: 1px solid red;
/*子元素是行内块时候 可以通过text-align center 设置水平居中*/
text-align: center;
}
img{
width: 200px;
height: 200px;
/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*/
line-height: 400px;
/*margin:100px auto;*/
margin-top: 50px;
}
水平方向能不能也靠margin auto实现呢?
.con{
width: 40%;
height: 300px;
margin:50px auto;
border: 1px solid red;
/*子元素是行内块时候 可以通过text-align center 设置水平居中*/
/*text-align: center;*/
}
img{
width: 200px;
height: 200px;
/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*/
/*line-height: 300px;*/
margin:50px auto;
/*margin-top: 50px;*/
}
这个时候发现垂直居中了 但是水平没有居中。。。原因暂时想不出来。。。
总结:这种方法比较初级,前提是图片固定大小,根据盒子大小和图片大小计算出margin-top,从而让图片垂直居中。如果不需要水平居中则去掉外部盒子的 text-align: center;
2、利用display:table-cell
html代码同上
css代码
.con{
width: 40%;
height: 300px;
/*margin不生效*/
margin:50px auto;
border: 1px solid #ddd;
/*转换表格属性*/
display: table-cell;
/*垂直方向居中*/
vertical-align: middle;
/*水平方向居中*/
text-align: center;
}
img{
width: 200px;
height: 200px;
}}
效果如下:
总结:这个方法主要是利用了表格属性,用table-cell
搭配vertical-align
可以十分简单地完成元素垂直居中。但是margin不生效了。。。
3、利用背景实现居中
html代码
<div class="con"></div>
css
.con{
width: 400px;
height: 300px;
border: 1px solid #ddd;
background:url(images/dog.jpg) center center no-repeat;
}
效果一样
总结:图片固定不变的地方可以使用。
4、利用定位
<div class="con">
<img src="images/dog.jpg">
</div>
css
.con{
width: 40%;
height: 300px;
/*margin不生效*/
margin:50px auto;
border: 1px solid #ddd;
position: relative;
}
img{
position: absolute;
width: 200px;
height: 200px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;//很关键
}
其他的方法还有很多,关键是找到适合的方法。