欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【CSS】不知道图片大小的时候,使用position进行水平和垂直居中

程序员文章站 2022-05-26 22:29:21
...

使用position进行定位

    <style>
        .bg {
            background: linear-gradient(#FFDDE1, #FFDDE1);
            width: 100%;
            height: 100%;
            text-align: center;
            position: relative;
        }
        .bg-img {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
    <div class="bg">
        <img src="../img/bg.png" alt="background" class="bg-img">
    </div>

父级元素 div.bg 属性为

position:relative; 
text-align:center;

元素img.bg-img 属性为

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

【CSS】不知道图片大小的时候,使用position进行水平和垂直居中

相关标签: 问题解决