如何在div中垂直和水平放置一个图像？

Question

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

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

你会建议什么？

Ps。这是一个播放按钮，将出现在视频容器div上。

Answer 1

Mybe这将工作：

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

Answer 2

本文取了由克里斯·Coyier对CSS-技巧。我认为这可能有所帮助。几天前我遇到了同样的问题，他的回答对我很有帮助。

Centering an image horizontally and vertically

基本的想法是，如果你的形象有一组宽度和高度。你可以绝对地将它从左边和上边定位50％，然后做负边界，等于宽度和高度的一半，使它回到死点。如果图像没有设置尺寸，它们是垂直居中放置图像的其他方法。

Answer 3

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

它会帮助你...在这个link

Answer 4

我想这会工作，试着让知道

CLCK ...

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