Question

我在这里有一个jsfiddle：http://jsfiddle.net/apej60nL/

我在bootstrap中有两列。一列是文本作为内容，另一列是空的，除了重新映射图像的黄色div。

我需要将黄色div垂直居中于文本块。要做到这一点，我需要使包含黄色div的左div与文本div的高度相同。

我用

做了这个

.test .row {
    display: table;
}

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

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

如何知道尺寸，我如何将其垂直居中？

Answer 1

使黄色块（图像）的顶部/右侧/底部/左侧位置为零，并且自动边距为：

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

<强> jsFiddle example

Answer 2

在不知道宽度/高度的情况下，这是一个例子：

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

Demo

Answer 3

我对您的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;
}

JS Fiddle Demo

注意：如果您想约束block div的宽度，请添加max-width样式。

Answer 4

vertical-align: middle可以很好地处理表格单元格，但我必须将黄色框更改为display: inline-block：

.test .row {
    display: table;
}
.left, .right {
    float: none;
    display: table-cell;
}
.left {
    background: #F00;
    vertical-align: middle;
    text-align: center;
}
.right {
    background: #DDD;
    vertical-align: top;
}
.block {
    background: #FF0;
    display: inline-block; /* display changed to inline block */
    text-align: left;      /* text align is inherited so reset it */
}

Updated Fiddle

Answer 5

看到它。

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

http://jsfiddle.net/srvnk44/apej60nL/22/

中心div没有负边距

5 个答案:

JS Fiddle Demo