css提示框居中显示

提示框的html代码：

<div class="join-dialog-background" style="display: none;">
    <div class="dialog"
         style="border: none;font-size: 16px;vertical-align: middle;text-align: center;line-height: 2rem">
        <img style=" width: 30px;position: absolute;top: -13%;right: -5%" src="/Public/Wap/img/share/jjds_down_close.png"
             onclick="javascript:$('.join-dialog-background').hide();">
        请复制链接前往浏览器打开
    </div>
</div>

在这个页面居中显示css样式：

 .join-dialog-background {
        background-color: rgba(0, 0, 0, .2);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 9999;
        display: none;
    }

    .join-dialog-background .dialog {
        text-align: center;
        color: #c2c2c1
        border: 1px solid #ffffff;
        width: 70%;
        height: 2rem;
        left: 15%;
        top: 50%;
        position: absolute;
        margin-top: -1rem;
        background-color: #323232;
        /*border-radius: .2rem;*/
    }