Центральное изображение вертикальное и горизонтальное

Я, как правило, делаю это на каждом веб-сайте, который я создаю, но я все же действительно нахожу настоящий хороший способ сделать это. Обычно компания дает мне свой логотип, я сосредотачиваю его на середине экрана, когда вы переходите на страницу, а затем автоматически пересылаете вас на домашнюю страницу. Я не могу найти хороший способ центрировать изображение в середине экрана без кучи столов и divs! Любые хорошие предложения?!

Ответ 1

Вы можете попробовать использовать div в своем HTML, например:

<div id='dv'></div>

И используя фоновое изображение, подобное этому:

#dv {
    background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
    background-position: center;
}

html,body,#dv { /* so that the #dv can fill up the page */
    width:100%;
    height:100%;
}

Fiddle

Ответ 2

Лично мне нравится использовать метод display: table-cell.

Например, если мой HTML:

<div class="wrapper">
     <img src="http://placehold.it/150x50" alt="Company ABC" />
</div>

Тогда мой CSS должен быть:

div.wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 600px;
    height: 200px;
}

Если я не могу использовать вышеупомянутый метод, другой жизнеспособный вариант заключается в использовании свойства line-height.

HTML для метода line-height:

<div class="wrapper">
    <img src="http://placehold.it/150x50" alt="Company XYZ" />
</div>

CSS для метода line-height:

img {
    line-height: 300px;
}

Ответ 3

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

Я предполагаю, что вы говорите о всплывающей странице, так что вот простой пример (хотя в других случаях я не рекомендую изменять тег body, как я это сделал):

<!doctype html>
<html>
    <head>
        <title>blah</title>
        <style type="text/css">
            html,body {margin:0;padding:0;width:100%;height:100%;}
            body {display:table;}
            p {display:table-cell;text-align:center;vertical-align:middle;}
        </style>
    </head>
    <body>
        <p>Hello World - This could have an image in it</p>
    </body>
</html>

Фокус в CSS:

Элемент, который вы хотите центрировать как по горизонтали, так и по вертикали, отображается как ячейка таблицы: display:table-cell
Родитель (контейнер) элемента, который вы хотите центрировать, отображается в виде таблицы: display:table
Убедитесь, что элемент отображения таблицы потребляет всю область, против которой вы хотели бы центрировать.
Элемент, который вы хотите центрировать, должен быть выровнен по горизонтали (объявление text-align:center) и вертикально (vertical-align:middle Объявление)
Свойства text-align и vertical-align работают только особым образом, поскольку элемент отображается как table-cell

Ответ 4

Вы не скажете, известен ли размер изображения.

Есть несколько способов сделать это, я предпочитаю некоторые CSS, например, на изображении с id="centreme" (если изображение 200x200) и оберткой для всей страницы

div#contentwrapper {
    width:100%;
    height:100%;
    position:relative;
}
img#centreme {
    position: relative;
    width: 200px;   /* the image width */
    height: 200px;  /* the image height */
    top: 50%;
    left: 50%;
    margin-top: -100px;  /* half the image height */
    margin-left:-100px;  /* half the image width */
}

скрипка для игры с http://jsfiddle.net/7PYzB/2/

Ответ 5

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}

<body>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMtBiLioXqfhufpptex_ta8kGJa5UDQS3aITpBetR8EwH5GGDTJw" />   
</body>