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

Question

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

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

你会建议什么？

聚苯乙烯。这是一个播放按钮，将出现在视频容器div的顶部。

Answer 1

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

Centering an image horizontally and vertically

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

Answer 2

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

它会帮助你......

点击此link

Answer 3

Mybe这将起作用：

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

Answer 4

我想这会奏效，试试让我们知道......

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