未知图片宽高水平垂直居中

最新推荐文章于 2022-09-01 20:16:38 发布
置顶 最新推荐文章于 2022-09-01 20:16:38 发布
阅读量1.1k 收藏
点赞数
分类专栏： web前端学习 文章标签： 图片 垂直 水平 居中 垂直水平
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/libin_1/article/details/51001405
版权

先来个纯CSS的

这里写图片描述

<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            html {
                width: 100%;
                height: 100%;
            }

            body {
                width: 100%;
                height: 1500px;
            }

            .masks  {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                background: black;
                opacity: 0.5;
            }

            .mask {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                display: table;
            }

            .main {
                width: 200px;
                height: 200px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }

            p {
                padding: 10px;
                background: red;

                display: inline-block;
                border-radius:10px ;
            }
        </style>
    </head>

    <body>
        <div class="masks"></div>
        <div class="mask">
            <div class="main">
                <p>hahhaa</p>
            </div>
        </div>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
    </body>

</html>
<!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            html {
                width: 100%;
                height: 100%;
            }

            body {
                width: 100%;
                height: 1500px;
            }

            .masks  {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                background: black;
                opacity: 0.5;
            }

            .mask {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                line-height: 100%;
                left: 0px;
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;
            }



            .main {
                width: 300px;
                height: 300px;
                padding: 10px;
                background: red;
                line-height: 300px;
                display: block; 
                border-radius:10px ;
            }
        </style>
    </head>

    <body>
        <div class="masks"></div>
        <div class="mask">
            <div class="main">
                <p>hahhaa</p>
            </div>
        </div>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
    </body>

</html>
 <!DOCTYPE html>
<html>

    <head>

        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            html {
                width: 100%;
                height: 100%;
            }

            body {
                width: 100%;
                height: 1500px;
            }

            .masks  {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                background: black;
                opacity: 0.5;
            }

            .mask {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;

                left: 0px;

            }



            .main {
                width: 300px;
                height: 300px;
                padding: 10px;
                background: red;
                line-height: 300px;
                display: block; 
                border-radius:10px ;
                position: absolute;
                margin: auto;
                top: 0px;

                left: 0px;
                right: 0px;
                bottom: 0px;
            }
        </style>
    </head>

    <body>
        <div class="masks"></div>
        <div class="mask">
            <div class="main">
                <p>hahhaa</p>
            </div>
        </div>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
    </body>

</html>
<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="UTF-8">
        <title></title>

        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }

            html {
                width: 100%;
                height: 100%;
            }

            body {
                width: 100%;
                height: 1500px;
            }

            #zhezhao {
                position: fixed;
                top: 0px;
                left: 0px;
                bottom: 0px;
                right: 0px;
                background: red;
                opacity: 0.3;
            }

            .mask {
                position: fixed;
                top: 0px;
                left: 0px;
                bottom: 0px;
                right: 0px;
            }

            .main {
                width: 75%;
                max-width: 320px;
                height: 100px;
                position: absolute;
                top: 50%;
                left: 50%;
                background: green;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>

    <body>
        <div id="zhezhao">

        </div>
        <div class="mask">
            <div class="main">
                <p>hahhaa</p>
            </div>
        </div>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
        <h1>哈哈哈哈哈哈哈哈哈哈哈哈</h1>
    </body>

</html>

这里写图片描述

万能的方法就是绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>未知图片宽高居中</title>
        <style type="text/css">
            .div-1 {
                width: 200px;
                height: 200px;
                border: 1px solid red;
                text-align: center;
                display: table-cell; 
                vertical-align: middle;
            } 
        </style>
    </head>
    <body>
        <div class="div-1">
            <img src="img/11111.jpg" />
        </div>
    </body>
</html>

这里写图片描述

前提是父DIV能包住图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            body{
                background: black;
            }
            div{ 
                width: 715px;
                height: 665px;
                border: 1px solid red;
                line-height: 667px;
                text-align: center;
            }
            img{
                vertical-align: middle;
            }  
        </style>
    </head>
    <body>
        <div><img src="images/3.jpg"/></div>
    </body>
</html>

上面的也可以这样实现，前提是父DIV能包住图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            body{
                background: black;
            }


         div{
                width: 715px;
                height: 665px;
                display: table-cell;
                border: 1px solid red; 
                vertical-align: middle;
                text-align: center;
            }    

        </style>
    </head>
    <body>
        <div><img src="images/3.jpg"/></div>
    </body>
</html>

上面的也可以这样实现

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            body {
                background: black;
            }

            div {
                width: 715px;
                height: 665px;
                display: -webkit-box;
                -webkit-box-pack: center;
                -webkit-box-align: center;
            }
        </style>
    </head>

    <body>
        <div><img src="images/3.jpg" /></div>
    </body>

</html>

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .main {
                width: 500px;
                height: 200px;
                background: red;
                position: relative;
            }

            .son {
                width: 250px;
                position: absolute;
                height: 100px;
                margin: auto;
                top: 0px;
                background: blue;
                left: 0px;
                right: 0px;
                bottom: 0px;
            }
        </style>
    </head>

    <body>
        <div class="main">
            <div class="son"></div>
        </div>
    </body>

</html>

这样也行哈

<style type="text/css">
.main{
        width: 400px;
        background: blue;
        height: 200px;
        display: -webkit-box;
        -webkit-box-pack: center;
        -webkit-box-align: center;
    }
    .java{
        width: 300px;
        height: 50px;
        background: red;
    }
</style>

<div class="main">
    <div class="java">
    </div>
</div>

再来一种

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
            }
            .div1 {
                width: 500px;
                height: 200px;
                background: red;
                position: relative;
            }

            .div11 {
                width: 250px;
                height: 100px;
                background: green;
                transform: translate(125px, 50px);
            }
        </style>
        <div class="div1">
            <div class="div11">
            </div>
        </div>
    </body>

</html>
最骚的就是你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
未知元素宽高水平垂直居中
luozc_web的博客
09-18 613
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>未知宽度高度的水平垂直居中(4种)</title> <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascrip
未知宽高元素水平垂直居中对齐的四种方式 | 定位 | flex布局 | grid布局 | table-cell
dxy1128的博客
11-03 1412
使用一个父盒子包含一个宽高随意的子元素，使子元素在父元素内水平垂直居中。
设置未知宽高元素水平垂直都居中的几种方法
qq_59541478的博客
09-01 1840
设置盒子或者元素水平垂直居中是在面试中有可能遇到的问题，本文介绍了几种设置方法
元素未知宽高垂直水平居中
qiankui的博客
03-01 290
未知宽高 position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
图片水平垂直居中
susuzhe
03-03 1634
上一年面试的时候被问到的一道题目，很尴尬的是，大早上起来就去被问蒙了，居然一点答不上来，想想自己也是蠢啊，现在分享出来，一面小伙伴再次被坑。 第一种方式：display：table-cell 第二种方式：定位加translate 第三种方式： 弹性盒   display-box 第四种方式：新版弹性盒display:f
CSS解决未知高度的垂直水平居中自适应问题
09-27
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0
CSS 实现未知内容高度的垂直水平居中(改良版)
12-11
垂直居中在IE浏览器下的实现比较难实现，而更难实现的应该是未知内容高度的垂直水平居中！还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera…如发现问题有劳回复评论！ ...
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
01-19
下文以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下: <!DOCTYPE html> <html> <head> <meta charset= utf-8> <meta name=author content=...
CSS 解决未知高度垂直居中实现代码
09-25
在网页设计中，垂直居中是一项常见的需求，尤其是在处理具有未知高度的内容时。然而，传统的CSS `vertical-align` 属性并不适用于所有情况，尤其是当一个`div`包含未知高度的文本或图片时。在这种情况下，我们需要...
css设置未知尺寸图片的水平和垂直居中
03-31
/* 水平垂直居中 */ height: 100vh; width: 100%; background-color: #f0f0f0; } .container img { max-width: 100%; max-height: 100%; object-fit: cover; } ``` 以上就是关于使用CSS设置未知尺寸图片在...
未知尺寸图片的居中 css解决方法
bluesky
12-01 139
对未知尺寸图片的居中，是经常遇到的一个问题。不过，这里首先声明的是，未知尺寸的图片是指在程序控制了一定大小限制下，尺寸小于当前容器的图片 。 目前较为通用的解决方法是利用display和fontSize的hack，尽量减少了无语义的标签。 上代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;impng &lt;/title&gt; &lt;meta...
CSS未知宽高的元素，水平垂直居中
微光的博客
11-28 605
方法一：使用定位 思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%) 优点：高大上,可以在webkit内核的浏览器中使用 缺点：不支持IE9以下不支持transform属性 &lt;style&gt; .parent{ position: relative; height:300px; ...
纯css实现未知尺寸图片在DIV中垂直水平居中（超简单）
阿生先生的博客
05-27 6875
纯css实现未知尺寸图片在DIV中垂直水平居中，css代码量极少，html结构十分简单。
未知宽高div水平垂直居中3种方法
热门推荐
Abel.lin的专栏
10-25 1万+
未知宽高div水平垂直居中3种方法：1、transform与绝对定位方式。2、Flexbox方式。3、伪类方式
css3 解决未知高宽垂直居中的问题
长云的博客
08-02 1769
常在absolute之后, 想让元素居中,都会采用margin-top:-[元素高度的一半]和 margin-left:-[元素宽度的一半] ,  但是当我们的元素宽高不是固定的时候, 这就难办了,   还好css3里面的translate给了我们很大的方便呀 　　 　　　　　　未知高度宽度水平、垂直居中 　　 .box{
未知宽高div水平垂直居中3种方法，div水平居中3种
Alexzheng_shuai的博客
10-17 2310
未知宽高div水平垂直居中3种方法，div水平居中3种
2024-2025-1学期选课第一轮停开课程.xlsx
最新发布
07-09
2024-2025-1学期选课第一轮停开课程.xlsx
怎么让图片水平垂直居中在盒子里
05-25
可以使用以下 CSS 样式来让图片水平垂直居中在盒子里： ```css .box { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } .box img { max-width: 100%; max-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值