html - 如何在更大的div内使图像中心（垂直和水平）居中[重复](How to make an image center (vertically & horizontally) inside a bigger div [duplicate])

Question

This question already has answers here) : 这个问题已经在这里有了答案) ：)

CSS center text (horizontally and vertically) inside a div block (23 answers) div块内的CSS中心文本（水平和垂直） （23个答案）)

Flexbox: center horizontally and vertically (10 answers) Flexbox：水平和垂直居中 （10个答案）)

How to vertically align an image inside a div (35 answers) 如何在div内垂直对齐图像 （35个答案）)

How to Vertical align elements in a div? 如何在div中垂直对齐元素？) (28 answers) （28个答案）)

Closed 3 months ago . 3个月前关闭。)

I have a div 200 x 200 px.

(我有一个div 200 x 200像素。)

I want to place a 50 x 50 px image right in the middle of the div.

(我想在div的中间放置一个50 x 50像素的图像。)

How can it be done?

(如何做呢？)

I am able to get it centered horizontally by using text-align: center for the div.

(我可以通过使用text-align: center div的text-align: center使其水平居中。)

But vertical alignment is the issue..

(但是垂直对齐是个问题。)

  ask by Shameem translate from so

Answer 1

Working in old browsers (IE >= 8)

(在旧的浏览器中工作（IE> = 8）)

Absolute position in combination with automatic margin permits to center an element horizontally and vertically.

(绝对位置与自动边距相结合，可以使元素水平和垂直居中。)

The element position could be based on a parent element position using relative positioning.

(元素位置可以基于使用相对定位的父元素位置。)

View Result

(查看结果)

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}