Как централизовать изображения с абсолютной позицией?

Question

У меня есть три изображения в <div>, Я хочу, чтобы изображения накладывались друг на друга (для слайд-шоу с использованием прозрачности) и оставались в центре моего сайта.

Для наложения изображений я установил их положение на абсолютное (position: absolute;). Однако это противоречит моему методу централизации моих изображений. Чтобы сделать мои изображения центральными, я даю изображениям следующие свойства: margin: 0 auto; display: block; Это не работает, когда позиции изображений установлены на абсолют. Какие еще методы я могу использовать для наложения моих изображений и / или их централизации.

<div>
<img  id="SlideShow1" src="Images\image1.jpg" width="512" height="512">
<img  id="SlideShow2" src="Images\image2.png" width="512" height="512">
<img  id="SlideShow3" src="Images\image3.jpg" width="512" height="512">
</div>


img {
position: absolute;
   margin: 0 auto;
    display: block;
}

Answer 1

Другой вариант с использованием CSS3 transform:

img{
  display:block;
  position:absolute;
  left:50%;
  transform:translate(-50%,0);
}

При необходимости добавьте префиксы поставщиков.

Это также было упомянуто в ответе на вопрос " Центрировать изображение с помощью CSS (горизонтальный и вертикальный)".

Answer 2

В дополнение к установке автоматических полей и абсолютного позиционирования, вам также нужно установить все смещения (верх / левый / и т. Д.) В 0. Этот метод должен работать, пока у вас есть заявленная высота:

.absolute-center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

( источник)

Answer 3

Увидеть скрипку

Чтобы централизовать абсолютно позиционированные элементы, используйте

left:0;
right:0;

вместе с margin:0 auto;