Возможный дубликат:
Как центрировать div горизонтально и вертикально
Мне нужно поместить изображение в центр html-страницы, как по вертикали, так и по горизонтали... попробовал немного вещей, но, похоже, работает нормально. Чтобы получить горизонтальное выравнивание, я использовал
<body style="text-align:center">
и он отлично работает, но что делать с вертикальным выравниванием?
рассматривает
Если:
X - ширина изображения,
Y - высота изображения,
то
img {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)px;
margin-top: -(Y/2)px;
}
Но имейте в виду, что это решение действительно только в том случае, если единственным изображением на вашем сайте будет этот образ. Я полагаю, что дело здесь.
Использование этого метода дает вам преимущество текучести. Не имеет значения, насколько большой (или маленький) экран для кого-то. Изображение всегда останется посередине.
Поместите свое изображение в контейнер 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*/
}
Теперь вы можете дать фоновое изображение тела
и установите background-position:center center;
как этот
body{
background:url('../img/some.jpg') no-repeat center center;
min-height:100%;
}
Существует несколько различных опций, основанных на том, что именно вы делаете. Когда-то Крис Койер сделал это так. Стоит прочитать: