Нужно центрировать изображение на веб-странице с помощью CSS

Question

Я бы хотел центрировать изображение на странице как по вертикали, так и по горизонтали, даже если размер браузера был изменен.

В настоящее время я использую этот CSS:

.centeredImage {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -150px;
}

И этот HTML:

<img class="centeredImage" src="images/logo.png">

Он центрируется в FF, но не в IE (центр изображения расположен в левом верхнем углу). Есть идеи?

-Robot

Answer 1

IE имеет проблемы с position: fixed (наряду с миллионами других вещей), поэтому я бы советовал против этого, если важна совместимость.

Используйте position: absolute, если контейнер не должен прокручиваться. В противном случае вам понадобится немного js, чтобы отрегулировать верхнюю и левую часть изображения при прокрутке.

text-align: center должно работать, если оно применяется к контейнеру изображения, но не к самому изображению. Но, конечно, это касается только горизонтального, а не вертикального. vertical-align: middle не работает для меня, даже с достаточно большим контейнером.

Автоматические поля не работают в IE, по крайней мере, когда я его тестирую.

Answer 2

Если предоставленные ответы не работают и / или не согласуются в каждом браузере, вы можете попробовать:

http://andreaslagerkvist.com/jquery/center/

text-align:center;

Должен получить, хотя.

Answer 3

text-align:center;

vertical-align:middle;

вертикально-Align

Должен подвох