美文网首页网页前端后台技巧(CSS+HTML)Web前端之路1024
HTML/CSS 设置背景图片一屏幕下水平垂直居中

HTML/CSS 设置背景图片一屏幕下水平垂直居中

作者: 圆梦人生 | 来源:发表于2019-11-08 15:23 被阅读0次

    1、直接设置最大div高度为100vh,设置背景图水平垂直居中
    2、使用绝对定位 + translate 位移

    案例:

    <html>
        <head>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                .divInfo {
                    min-height: 100vh;
                    background: url('111111.png') center no-repeat;
                }
                
                .centerbg {
                    background: red;
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%,-50%);
                }
            </style>
        </head>
        <body>
            <div class="centerbg">
                方式2
            </div>
            
            <!-- 方式1 -->
            <div class="divInfo">
            </div>
        </body>
    </html>
    

    效果

    image.png

    相关文章

      网友评论

        本文标题:HTML/CSS 设置背景图片一屏幕下水平垂直居中

        本文链接:https://www.haomeiwen.com/subject/nrxwbctx.html