css中圖片在div居中代碼的寫法

發(fā)布時(shí)間：2021-01-05 09:26:57 來源：億速云閱讀：195 作者：小新欄目：web開發(fā)

小編給大家分享一下css中圖片在div居中代碼的寫法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

圖片css div居中代碼的寫法：首先將display設(shè)置成table-cell；然后水平居中設(shè)置text-align為center；最后將垂直居中設(shè)置vertical-align為middle即可。

body結(jié)構(gòu)

<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body>

方法一：

將display設(shè)置成table-cell，然后水平居中設(shè)置text-align為center，垂直居中設(shè)置vertical-align為middle。

<style type="text/css">
*{margin: 0;padding: 0;}
    div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
        width: 50px;
  height: 50px;
}
</style>

結(jié)果如下圖所示：

css中圖片在div居中代碼的寫法

方法二：

通過position定位來實(shí)現(xiàn)。將div設(shè)置成相對(duì)定位relative，將img設(shè)置成絕對(duì)定位absolute，left:50%，top:50%，此時(shí)圖片的左上角位于div的中心，要是圖片的中心位于div的中心，就需要將圖片向上移動(dòng)圖片高度的一半，并向左移動(dòng)圖片寬度的一半。

<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
left: 50%;
  margin-top: -25px; /* 高度的一半 */
  margin-left: -25px; /* 寬度的一半 */
}
</style>

結(jié)果如下圖所示：

css中圖片在div居中代碼的寫法

方法三：可以用在不清楚圖片圖片或元素的真實(shí)寬高情況下

還是通過position定位來實(shí)現(xiàn)。將div設(shè)置成相對(duì)定位relative，將img設(shè)置成絕對(duì)定位absolute，left:50%，top:50%，此時(shí)圖片的左上角位于div的中心，要是圖片的中心位于div的中心，就需要將圖片向上移動(dòng)圖片高度的一半，并向左移動(dòng)圖片寬度的一半，如果不知道元素的寬高，可以用transform: translate(-50%,-50%);

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>

方法四：

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

方法五：彈性布局flex

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

以上是“css中圖片在div居中代碼的寫法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

css中圖片在div居中代碼的寫法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽