Question

我试图将图像居中在div的正中间 - 水平和垂直，但这对我不起作用：

#col_as_table
{
    float:left;
    position:relative;
    width:14%;
    min-height:100px;
    height:auto;
    display: table;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML

<div id="col_as_table"><img src="test.png"></div>

Answer 1

给它一个机会。你需要一个额外的div。

Fiddle!

HTML：

<div class="divTable">
    <div class="innerDivTable">
        <img src="test.png"/>
    </div>
</div>

CSS：

.divTable {
    width: 200px; /* purely for demonstration */
    height: 200px; /* purely for demonstration */
    display: table;
    border: 1px solid black;
}

.innerDivTable {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Answer 2

小提琴：http://jsfiddle.net/4mYj3/1/

CSS：

#col_as_table
{
   position:relative;
   margin: auto;
   text-align: center;
   vertical-align: middle;
   display: table;
   height:500px;
}
img{
  position: absolute;
  top: 50%; 
  left: 0; 
  bottom: 0; 
  right: 0;
}

Answer 3

前段时间我为了同样的目的写了Pen。它显示了3种如何垂直和水平居中图像的方法。

我个人使用绝对定位或表格单元格视情况而定。

#div3{
    display:table-cell;
    vertical-align:middle;
}

#div1 img{
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translateY(-50%) translateX(-50%);
}

Answer 4

这是一个小提琴：

http://jsfiddle.net/C4DC7/

有很多方法可以实现这一目标。我的示例扩展了您可以负担得起图像以扩展父div元素的想法。

如何将图像置于div中间的正中

4 个答案: