首页 > 代码库 > img标签在div中水平垂直居中--两种实现方式

img标签在div中水平垂直居中--两种实现方式

2024-09-23 21:46:25   214人阅读

第一种方式： text-align:center; vertical-align:middle;

        div{
            text-align: center;
            vertical-align:middle;width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        img{vertical-align: middle}
        span{height: 100%;vertical-align: middle;display: inline-block}


<div style="">
    <span></span>
    <img src="http://www.mamicode.com/ad-pic.png"  style="border: 1px solid #000;">
</div>

第二种方式  通过设置img为绝对定位，处于垂直和水平50%，然后平移自身宽高的50%

 

        div{ 
            position: relative; 
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
        img{
            position: absolute;
            top:50%; 
            left:50%;
            transform: translate(-50%,-50%);
        }

 

img标签在div中水平垂直居中--两种实现方式


联系
我们