1、第一种css代码如图所示。display设置成table-cell,text-align为center,垂直居中设置vertical-align为middle。
2、打开浏览器查看结果,图片已处于正中状态。
3、第二种方法css代码如图。div设置成相对定位,img设置成绝对定位,然后left:50%,top:50%,此时图片的左上角将位于div的中心。重点:图片向上移动图片高度的一半,并向左移动图片宽度的一半。正好为与div正中间。
4、在浏览器查看结果,图片水平,垂直均居中。
首先创建一个div,以及对有图片的div设置样式,给img的父级添加一个diaplay,并且属性为table,并且把包含图片的div中的display属性设置成table-cell,最后给有图片的div设置成vertical-align:
middle属性,代码如下:
.tablebox{
width: 300px
height: 250px
background: #fff
display: table
}
#xxx{
display: table-cell
vertical-align: middle
}
#xxx img{
width: 100px
}
可以多看看黑马程序员的课程,多学学这些基础知识。