css 居中的简单方法

最近在写一个居中的H5弹窗，有个居中的效果，按之前雪峰说的方法，做了处理。
然后有个需求，说关闭的按钮要随着中间的图片靠中。有点抽象，直接上图好了。

方法一

在这里插入图片描述

我是这样写的：

<style type="text/css">
    .dialog {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 0px;
        height: 0px;
    }

    .dialog-cont {
        position: absolute;
        left: -175px;
        top: -125px;
        width: 350px;
        height: 250px;
    }
</style>

<body>
    <div class="main-cover"></div>
    <div class="main">
        <div class="dialog">
            <div class="dialog-cont">
                <div class="dialog-img">
                    <div class="close"><i></i></div>
                    <div class="content">
                        <img class="coupon" src="img/3.png" alt="" />
                    </div>
                    <div class="no-more-display"><i></i><span>本消息不再提示</span></div>
                </div>
            </div>
        </div>
    </div>
</body>

思路就是定了高宽，然后绝对定位，left: 50%;top: 50%; 就居中了。

方法二

在这里插入图片描述

请教了一下方勇，被吐槽说dom层级太深入

最后是这样做的

<style type="text/css">
    .dialog-img {
        position: absolute;
        z-index: 10;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
</style>
<body>
    <div class="main-cover"></div>
    <div class="main">
        <div class="dialog-img">
            <div class="close"><i></i></div>
            <div class="content"><img class="coupon" src="static/images/2.png" alt="" /></div>
            <div class="no-more-display"><i></i><span>本消息不再提示</span></div>
        </div>
    </div>
</body>

有个注意点，transform这个在android 2.1之后就可以用，但是为了适应低版本的android，还是要加上

-webkit-transform: translate(-50%, -50%);

简单的代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Yeshen</title>
    <style type="text/css">
    i {
        display: inline-block;
    }

    body {
        margin: 0px;
    }

    .main-cover {
        z-index: inherit;
        background: black;
        opacity: 0.7;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .main {
        position: absolute;
        background-color: transparent;
        width: 100%;
        height: 100%;
    }

    .main pre {
        white-space: pre-wrap;
        word-break: break-word;
    }

    .dialog-bg {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        background-color: #2c3338;
        opacity: 0.9;
    }

    .dialog-img {
        position: absolute;
        z-index: 10;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }

    .dialog-img .content img {
        max-width: 350px;
        max-height: 250px;
        display: block;
        margin: auto;
    }

    .dialog-img .close {
        float: right;
        width: 24px;
        height: 24px;
        margin-top: -24px;
    }

    .dialog-img .close i {
        background: url('static/images/popups_close_pure.png') no-repeat;
        background-size: 100%;
        width: 12px;
        height: 12px;
        margin-left: 4px;
        margin-top: 4px;
    }

    * {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
        -webkit-focus-ring-color: rgba(0, 0, 0, 0);
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    </style>
</head>

<body>
    <div class="main-cover"></div>
    <div class="main">
        <div class="dialog-img">
            <div class="close"><i></i></div>
            <div class="content"><img class="coupon" src="static/images/2.png" alt="" /></div>
        </div>
    </div>
</body>

</html>

css 居中的简单方法

方法一

方法二

猜你喜欢