父母的中心图像

Question

这是一个常见问题，但我正在努力将图像div置于另一个div中。我正在使用bootstrap。我使用margin: 0auto left:0 right:0和position，但我无法将图像置于#abc div内。

FIDDLE

<div class="row abc col-xs-12 col-sm-12 col-md-12">
    <div class=" col-xs-4 col-sm-4 col-md-4 coWrap">
        <div class="col-xs-12 col-sm-12 col-md-12 thumbnail">
            <img class="thumbnail" src="http://img42.com/uyrJW+">
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 title coWrap">TITLE</div>
    </div>
</div>

的CSS：

.coWrap{
    margin: 0 auto;
    position: absolute;
}
.thumbnail{
    position: relative;
    margin: 0 auto;
}
.title{
    position: absolute;
}
.abc{
    height: 250px;
    background-color: #f60;
    position: relative;
}

预期输出

Answer 1

您需要指定top，bottom，left和amp;绝对元素的正确位置，以便用margin: auto定位它：

.coWrap {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

如果您希望它垂直居中，请记住margin:auto auto或margin:auto，并提供height。

小提琴：https://jsfiddle.net/s0ez9ag5/3/

Answer 2

您的.thumbnail是内联元素（）并不起作用。加上这个：

 .thumbnail {
    display:block;
 }

它有效