本篇內(nèi)容介紹了“css如何讓照片垂直居中”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司主要從事網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)龍勝,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):18982081108

方法：1、給照片元素的父元素添加相對(duì)定位樣式，給照片元素添加絕對(duì)定位樣式；2、利用top屬性和“margin-top”屬性設(shè)置照片垂直居中，只需要給照片元素添加“top:50%;margin-top:上外邊距值;”樣式即可。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css怎么讓照片垂直居中

用絕對(duì)定位實(shí)現(xiàn)垂直居中

1、給img的父元素添加相對(duì)定位屬性（position: relative），同時(shí)，要給子元素也就是圖片img元素添加絕對(duì)定位屬性（position: absolute）。

2、將圖片元素的top屬性設(shè)置為50%。

3、現(xiàn)在我們需要給img元素設(shè)置一個(gè)負(fù)的margin-top值，這個(gè)值為你想要實(shí)現(xiàn)垂直居中的元素高度的一半，*如果不確定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);屬性。

記住：如果你想要同時(shí)實(shí)現(xiàn)水平居中，那么你可以用實(shí)現(xiàn)垂直居中的一樣的技巧來(lái)實(shí)現(xiàn)。

示例如下：

.posdiv{
    width: 300px;
    height: 250px;
    position: relative; 
    border:1px solid red;
    }
.posdiv img{
    width: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    }