如何垂直居中對齊具有背景圖像的div

Question

我有一個外部div和一個內部div。內部div有background-image。

如何垂直居中對齊內部div image？
我不想使用margin-top

Here is fiddle

Answer 1

Use這個CSS。您將擁有垂直居中的Google徽標。

#imgDiv { 
    width: 300px; 
    height: 100px; 
    background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png"); 
    background-repeat: no-repeat; 
    border: 1px solid blue; 

    position:relative; 
    top: 50%; 
    -moz-transform: translatey(-50%); 
    -ms-transform: translatey(-50%); 
    -o-transform: translatey(-50%); 
    -webkit-transform: translatey(-50%); 
    transform: translatey(-50%); 
} 

Answer 2

你可以用一些簡單的CSS翻譯這個。使用「位置」屬性。

#parentDiv { 
    position: relative; 
} 

#childDiv { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
} 

Answer 3

嘗試這樣的：Demo

更新demo按您的要求：注：如果文本高度增加，背景圖像會向上移動

div.outer { 
display:table; 
border: 1px solid red; 
height:300px; 
width:300px 
} 
.inner { 
    display:table-cell; 
    vertical-align:middle; 
    line-height:normal; 
    margin:0 auto; 
    text-align:center; 
} 
#imgDiv { 
    width: 300px; 
    height: 100px; 
    background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png"); 
    background-position: center; 
    background-repeat: no-repeat; 
    border: 1px solid blue; 
} 
#spanid { 
    text-align: center; 
} 

HTML：

<div class="outer"> 
    <div class="inner"> 
     <div id="imgDiv"></div> <span id="spanid">Some text....</span> 
    </div> 
</div> 

Answer 4

您可以使用displayflex使它工作！這裏是Demo。

#imgDiv { 
     width: 500px; 
     height: 100px; 
     background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png"); 
     background-repeat: no-repeat; 
     border: 1px solid blue; 
     margin: auto; 
    } 
    .outerDiv { 
     display: -webkit-box; 
     display: -moz-box; 
     display: -ms-flexbox; 
     display: -webkit-flex; 
     display: flex; 
     border: 1px solid red; 
     height:300px; 
     width:300px; 
    } 

Answer 5

最簡單的方式是設置#imgDiv與高度的高度：100％;然後將背景位置設置爲居中，居中。

#imgDiv { 
    width: 300px; 
    height: 100%; 
    background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png"); 
    background-repeat: no-repeat; 
    border: 1px solid blue; 
    background-position:center,center; 
} 

Answer 6

家長添加display: table; 孩子補充display:table-cell;和vertical-align:middle;。如果你想background中心child to addbackground-position: center center;

#imgDiv { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-image: url("http://www.google.com/intl/en_com/images/srpr/logo3w.png"); 
 
    background-repeat: no-repeat; 
 
    border: 1px solid blue; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div style="position:relative; border: 1px solid red; height:300px; width:300px; display: table;"> 
 
    <div id="imgDiv"> Hello Vertical Middle !! </div> 
 
</div>