html结构

<div class="msg_box">
    <div class="msg_btn_box">
    </div>
</div>

1.先将容器的position设为relative;

2.然后将这个div的的样式添加position:absolute; bottom:0;

.msg_btn_box {position:absolute;bottom: 30px;margin: auto;left: 0;right: 0;} 

前提是position:absolute左右为0 ，然后写了个margin:auto;   dom就可以底部居中了

图片左右间隙相同，居中显示

.msg_box{text-align:center;width: 95%;margin: 0 auto;} //div左右居中
.msg_box img{width:auto;height:auto;max-width:100%;max-height:100%;}

margin:auto=margin:auto auto auto auto;
margin:0 auto=margin:0 auto 0 auto;
margin:n m p q表示该元素上外边距为n，右外边距为m，下外边距为p，左外边距为q，即 margin:上 右 下 左 ，逆时针一圈。
图片等比例缩放

img{width:auto;height:auto;max-width:100%;max-height:100%;}

通过设置img为绝对定位，处于垂直和水平50%，然后平移自身宽高的50%

div{
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}
img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}