Html 无负边距的中心div

我这里有一个JSFIDLE：

我在bootstrap中有两列。一列的内容是文本，另一列是空的，只有一个黄色的div正在重新显示图像

我需要将黄色div垂直居中放置在文本块上。为此，我需要使包含黄色div的左div与文本div的高度相同

我已经做了这件事

.test .row {
    display: table;
}

.left, .right {
    float: none;
    display: table-cell;
    vertical-align: top;   
}

我绝对定位黄色div，并使用负边距将其居中。我可以这样做，因为我知道黄色div的宽度/高度。我需要在不知道宽度/高度的情况下这样做。图像/div可以是不同的维度

---

如何在知道尺寸的情况下使其垂直居中？

使黄色块（图像）的上/右/下/左位置为零，并使边距自动：

.block {
    background: yellow;
    position: absolute;
    height: 150px;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    margin:auto;
    width: 50px;
}

---

我对您的CSS做了一些更改，以实现您的目标：

.left, .right {
    float: none;
    display: table-cell;  
    //deleted vertical-align: top;  
}

.left{
    background: red;
    vertical-align:middle; //replaced position: relative; with this
}
.right{
    vertical-align: top; //add this
    background: #ddd;    
}

.block{
    //various changes here, will be centered horizontally and vertically
    background: yellow;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

---

注意：如果要约束

块的宽度，请添加
max width
样式。
而不知道宽度/高度，下面是一个示例：

.block{
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%)
    transform: translate(-50%,-50%)
}

垂直对齐：中间对齐

可以很好地处理表格单元格，但我必须将黄色框更改为

显示：内联块

：

.test.row{
显示：表格；
}
.左，.右{
浮动：无；
显示：表格单元格；
}
.左{
背景：#F00；
垂直对齐：中间对齐；
文本对齐：居中；
}
.对{
背景：DDD；
垂直对齐：顶部；
}
.街区{
背景：#FF0；
显示：内联块；/*显示更改为内联块*/
文本对齐：左；/*文本对齐是继承的，因此请重置它*/
}

看看吧

$(document).ready(function(){
    var l=$('.left').height()-50;
    var t=l/2;
    $('.block').css('top',t);
});

---

为什么必须将上/左/下/右设置为0？似乎funny@JuanMendes-要了解详细的解释，请查看非常有趣的内容，尽管我希望我们可以很快开始使用flex Box，以获得相同的效果，而不会出现看起来像黑客的情况。OP不是说没有硬编码的宽度/高度吗？@JuanMendes-尺寸只是为了说明。这是一张摆弄图像的小提琴。这种方法实际上并不是一种黑客行为，它是绝对定位的工作方式——尽管有时会以令人惊讶的方式。这就是为什么我说什么看起来像黑客行为，它不是很直观。不管怎样，一旦你知道了，这是一种垂直对齐的方式。其他人可能不太容易意识到发生了什么。我更新了答案，没有反映宽度/高度。如果问题没有提到jQuery（甚至JavaScript），你就不应该使用它。OP显然想用CSSWell实现这一点，这里已经有很多关于CSS的答案，所以至少这是另一种选择。