div中图片垂直水平居中

最新推荐文章于 2024-04-25 13:27:51 发布

RD高

最新推荐文章于 2024-04-25 13:27:51 发布

阅读量253

点赞数 1

分类专栏：前端技术文章标签： html

本文链接：https://blog.csdn.net/Key_Val/article/details/106048028

版权

前端技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

下方有完整的css，分享的力量来源于———>你的赞

   *{
        margin: 0;
        padding: 0;
    }
    /* 图片居中第一种方法 */
    .boxs{      
        width:100%;
        height: 100vh;
        /* position: relative; */
    }
    .imgs{
        width: auto;
        height: auto;
        position: relative;
        /* position: absolute; */
        top: 50%;
        left: 50%;      
        transform: translate(-50%,-50%);
    }
    /* 图片居中第二种方法 */
    /* .boxs{      
        width: 100vw;
        height: 100vh;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
     .imgs{
        width: auto;
        height: auto;      
    }  */
    /* 图片居中第三种方法 */
    /* .boxs{      
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
     .imgs{
        width: auto;
        height: auto;      
    } */
    /* 图片居中第四种方法 */
    /* .boxs{      
        width: 100vw;
        height: 100vh;
        position: relative;
    }
     .imgs{
        width: auto;
        height: auto; 
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;  
        right: 0;
        bottom: 0;   
    }  */
</style>