最近開發中經常碰到這樣的問題：活動中需要一個彈層，彈層是一張圖片，圖片上有一個按鈕，一般是指向一個鏈接地址的。在手機裏，要求圖片大小尺寸不限，但是要上下左右居中，並且圖片上的按鈕保存在圖片底部一定位置。

貼代碼：html代碼

<div class="floatResult">
        <div class="bg"></div>
        <div class="result">
            <span class="span"></span>
            <span class="image"
 
>
                <img src="img/gameover0.png" alt="闖關成功">
                <a class="imgBtn" href="javascript:void(0);">返回</a>
            </span>
            <span class="span"></span>
        </div>
    </div>

css代碼

.floatResult {
        /*display: none;
 
*/
    }

    .floatResult .bg {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
    }

    .floatResult .result {
        text-align: center;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right
 
: 0;
    }

    .floatResult .result .span {
        display: inline-block;
        width: 1%;
        height: 100%;
        vertical-align: middle;
    }

    .floatResult .result .image {
        width: 80%;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }

    .floatResult .result img {
        width: 100%;
        vertical-align: middle;
    }

    .floatResult .result .imgBtn {
        display: inline-block;
        width: 70%;
        position: absolute;
        left: 50%;
        bottom: 8%;
        margin-left: -35%;
        height: 44px;
        line-height: 42px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        border-radius: 22px;
        background: #ff4345;
        text-decoration: none;
    }

目錄結構如下：

本例按鈕是用css制作的。還可以，直接用圖片來頂替。直接用圖片的話，自適應效果會更好些。

移動端圖片上下居中且按鈕始終保持在圖片底部一定距離