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

Question

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

spotlight-area will be a div with random width and height. The image I'm using is 100px to 100px (resized). I've tried to center it with margin-top and margin-left but it looks like a crappy workaround.

What would you suggest?

Ps. It's a play button going to appear on top of videos container divs.

Answer 1

Check this article out by Chris Coyier on CSS-Tricks. I think it might help out. I ran into the same problem a few days ago and his answer worked for me.

Centering an image horizontally and vertically

Basically the idea is, if your image has a set width and height. You can absolute position it from the left and top 50% and then do negative margins equal to half of the width and height to bring it back dead center. They're are other ways to vertically center an image if it doesn't have set dimensions.

Answer 2

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

It will help you...

clck on this link

Answer 3

Mybe这将起作用：

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

Answer 4

I guess this will work, Try and let know...

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