在CSS中这样做:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}

我有一个图片库，我不知道准确的高度或宽度的图像之前，我只知道他们是小于div，他们将被包含。

通过在容器上组合行高设置并在图像元素上使用vertical-align:middle，我最终使用以下HTML标记和以下CSS使其在FF 3.5、Safari 4.0和IE7.0上工作。

HTML标记

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }

在CSS中这样做:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}

我喜欢跳老式马车!

以下是这个答案在2015年的更新。我开始使用CSS3 transform来做我的定位工作。这允许你不需要做任何额外的HTML，你不需要做数学(找到半宽的东西)，你可以在任何元素上使用它!

这里有一个例子(最后是小提琴)。HTML:

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

附带CSS:

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

我最近经常做的就是给我想居中的东西一个类然后每次都重用这个类。例如:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

css

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

通过这种方式，我将始终能够将容器中的内容居中。你只需要确保你想居中的东西是在一个定义了位置的容器中。

这是小提琴

BTW:这也适用于在较小的divs中居中更大的divs。

我们可以使用flex轻松实现这一点。不需要背景图片。

<！DOCTYPE html > < html > < >头 <时尚> # image-wrapper { 宽度:500 px; 身高:500 px; 边框:1px实体#333; 显示:flex; justify-content:中心; 对齐项目:中心; } > < /风格 > < /头 身体< > < div id = " image-wrapper " > <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> < / div > < /身体> < / html >

垂直对齐是最常被误用的css样式之一。对于不是td或css“display: table-cell”的元素，它不能像你期望的那样工作。

这是一篇关于这个问题的很好的文章。http://phrogz.net/CSS/vertical-align/index.html

实现你想要的目标最常见的方法是:

填充上/下 绝对位置 行高