Question

CODE：

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

<小时/> 尝试内联块，浮动等，无法使其工作..
我不能使用填充/边距，因为它的用户上传img，所以尺寸并不总是相同。

FIDDLE

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/

将图像对准垂直居中的div

4 个答案:

JSFiddle