在div垂直居中對齊圖像

Question

碼：

.company-logo-wrap{
    display: block;
    background: #fff;
    margin-left: -15px;
    padding: 10px;
    border: 1px solid #a5a5a5;
    text-align: center;
    height: 400px;
}

---

嘗試了內聯塊，浮動等，無法正常工作。
我無法使用padding / margin，因為它是用戶上傳的img，因此大小並不總是相同。

小提琴

Answer 1

您可以使用vertical-align: middle屬性，該屬性僅適用於display: table-cell/table

.company-logo-wrap{
    display: table-cell;  
    background: #fff;
    margin-left: -15px;
    padding: 10px;
    border: 1px solid #a5a5a5;
    text-align: center;
    height: 400px;
    vertical-align: middle;
}

的jsfiddle

Answer 2

使用display:table和table-cell

.company-logo-wrap{
    display:table; 
    background: #fff;
    margin-left: -15px;
    border: 1px solid red;
    text-align: center;
    height: 400px;
    width:100%
}
.company-logo-inner{
  display:table-cell;
   vertical-align:middle;
  background:grey
}

DEMO

Answer 3

使用以下CSS

.company-logo-wrap{
    display: table;
    background: #fff;
    margin-left: -15px;
    padding: 10px;
    border: 1px solid #a5a5a5;
    text-align: center;
    height: 400px;
    width:100%

}

.company-logo-inner {
    display: table-cell;
    vertical-align: middle;
}

Answer 4

HTML

<div class="main">

 <div class="box"></div>   
</div>

CSS

.main{ height:500px; border:1px red solid;position:relative}
.box{width:40px; height:40px; background:red; }

/* for centering */
.box{ display: inline-block; }
.main{ text-align: center; }
.main:after{ content: ""; display: inline-block; height: 100%; vertical-align: middle; }

檢查此http://jsfiddle.net/SxxWV/11/