Как разместить изображение в центре html-страницы?

Возможный дубликат:
Как центрировать div горизонтально и вертикально

Мне нужно поместить изображение в центр html-страницы, как по вертикали, так и по горизонтали... попробовал немного вещей, но, похоже, работает нормально. Чтобы получить горизонтальное выравнивание, я использовал <body style="text-align:center">

и он отлично работает, но что делать с вертикальным выравниванием?

рассматривает

Ответы

Ответ 1

Если:

X - ширина изображения,
Y - высота изображения,

то

img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -(X/2)px;
    margin-top: -(Y/2)px;
}

Но имейте в виду, что это решение действительно только в том случае, если единственным изображением на вашем сайте будет этот образ. Я полагаю, что дело здесь.

Использование этого метода дает вам преимущество текучести. Не имеет значения, насколько большой (или маленький) экран для кого-то. Изображение всегда останется посередине.

Ответ 2

Поместите свое изображение в контейнер div, затем используйте следующий CSS (изменение размеров в соответствии с вашим изображением).

.imageContainer{
        position: absolute;
        width: 100px; /*the image width*/
        height: 100px; /*the image height*/
        left: 50%;
        top: 50%;
        margin-left: -50px; /*half the image width*/
        margin-top: -50px; /*half the image height*/
    }

Ответ 3

Теперь вы можете дать фоновое изображение тела

и установите background-position:center center;

как этот

body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}

Ответ 4

Существует несколько различных опций, основанных на том, что именно вы делаете. Когда-то Крис Койер сделал это так. Стоит прочитать:

http://css-tricks.com/perfect-full-page-background-image/