img垂直水平居中与div

方法一:

img垂直水平居中与div
效果
1.HTML代码
<div>
    <img src="bj.png" alt="图片">
</div>
2.CSS代码
div{
    width: 400px;
    height: 300px;
    margin: 0 auto;
    background-color: #666;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
img{
    width: 200px;
}
3.备注

1.如果将给div设置display:table-cell,那么div就变成了行内块级元素。
2.如果div中有多重图片,那么会呈现这个效果。

img垂直水平居中与div
多张图片居中


方法二:

1.HTML代码
<div>
    <img src="bj.png" alt="图片">
</div>
2.CSS代码
div{
    width: 400px;
    height: 300px;
    margin: 0 auto;
    background-color: #666;
    position: relative;
}
img{
    width: 200px;
    height: 112px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -56px;
    margin-left: -100px;
3.备注
  1. 始终"子绝父相"的定位方法,父元素div的display不会改变,不会影响父元素的位置
上一篇:mysql数据上传logstash实践


下一篇:【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax