如何在 div 中垂直和水平居中图像？答案

【问题标题】：How to center an image inside div both vertically and horizontally?如何在 div 中垂直和水平居中图像？
【发布时间】：2013-02-08 19:39:30
【问题描述】：

.spotlight-area img {
    width: 100px; 
    height: 100px; 
    margin-top: 30%; 
    margin-left: 40%; 
}

spotlight-area 将是一个具有随机宽度和高度的 div。我使用的图像是100px 到100px（调整大小）。我尝试将它与 margin-top 和 margin-left 居中，但它看起来像是一个糟糕的解决方法。

你有什么建议？

附言。这是一个将出现在视频容器 div 顶部的播放按钮。

【问题讨论】：

标签： css

【解决方案1】：

查看这篇由 Chris Coyier 撰写的关于 CSS-Tricks 的文章。我认为这可能会有所帮助。几天前我遇到了同样的问题，他的回答对我有用。

基本上这个想法是，如果您的图像具有固定的宽度和高度。您可以将其从左侧和顶部 50% 绝对定位，然后执行等于宽度和高度一半的负边距以使其回到死点。如果图像没有设置尺寸，它们是垂直居中图像的其他方法。

【讨论】：

【解决方案2】：

vertical-align: middle;
text-align: center;

它会帮助你...

点击link

【讨论】：

【解决方案3】：

也许这会起作用：

   .spotlight-area { text-align: center; }

【讨论】：

【解决方案4】：

我想这会奏效，试着告诉我......

 .spotlight-area img {
        width: 100px; 
        height: 100px; 
        text-align: center;
    }

【讨论】：