Как отобразить изображение в центре div

Question

У меня есть div с ajax-loader gif image

<div id="mydiv" style="height: 400px; text-align: center;">
    <img src="/Content/ajax-loader.gif" class="ajax-loader"/>
</div>

.ajax-loader
{
    /*hidden from IE 5-6 */
    margin-top: 0; /* to clean up, just in case IE later supports valign! */
    vertical-align: middle;
    margin-top: expression(( 150 - this.height ) / 2); 
}

Но не удалось отобразить его в центре (как по вертикали, так и по горизонтали). Нужна помощь с этим.

Answer 1

Предполагается, что ширина и высота изображения известны:

#mydiv {
  height: 400px;
  position: relative;
  background-color: gray; /* for demonstration */
}
.ajax-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px; /* -1 * image width / 2 */
  margin-top: -32px; /* -1 * image height / 2 */
}

<div id="mydiv">
  <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader">
</div>

ОБНОВЛЕНИЕ : в современных браузерах margin: auto даст желаемый результат без знания ширины / высоты изображения:

#mydiv {
  height: 400px;
  position: relative;
  background-color: gray; /* for demonstration */
}
.ajax-loader {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* presto! */
}

<div id="mydiv">
  <img src="http://dummyimage.com/64x64/000/fff.gif&text=LOADING" class="ajax-loader">
</div>

Answer 2

полноэкранный ajax-загрузчик с некоторой непрозрачностью.

с использованием

$('#mydiv').show(); 
$('#mydiv').hide(); 

для его переключения.

#mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>

Answer 3

Поместите этот div прямо внутри области, которую вы обновляете:

<div id="myLoader" class="ajax-loader"></div>

И добавьте это к вашему CSS:

.ajax-loader {
    cursor: wait;
    background:#ffffff url('ajax-loader.gif') no-repeat center center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75;
    position: absolute;
    z-index: 10000;
    display: none;
}

Если вы хотите отобразить его, просто позвоните:

$('#myLoader').css({
    height: $('#myLoader').parent().height(), 
    width: $('#myLoader').parent().width()
});
$('#myLoader').show();

или некоторый эквивалент.

Answer 4

Использование:

display:inline-block;

Или:

display:block;

И:

text-align:Center;

Внутри CSS-файла ... Тогда оно появится

Answer 5

Другой подход к центру по горизонтали и вертикали изображения внутри div:

1. неизвестный размер изображения
2. неизвестный размер div
3. отзывчивым

DEMO

HTML:

<div>
    <img src="http://lorempixel.com/output/people-q-g-50-50-1.jpg" alt="" />
</div>

CSS:

div{
    position:relative;
}

img{
    position:absolute;
    top:0; bottom:0;
    left:0; right:0;
    margin:auto;
}

Answer 6

Решение Дейва Моргана сработало для меня.

Вот немного более чистая версия.

Проблема со всеми решениями, описанными выше, заключается в том, что вам нужно создать какое-то изображение или элемент div в вашем контейнере, прежде чем делать это. Это пустая трата ресурсов и затрудняет применение к конкретным целям. Позвольте jquery генерировать div вместо этого.

Вот мой код:

1010 * JS *

$('#trigger').on('click', function(){
   var target = $('#stage');
   var el = $('<div class="spinner" />').width(target.width()).height(target.height());
   target.prepend(el);
});

CSS

.spinner{
    position: absolute;
    cursor: wait;
    z-index: 10000;
    -khtml-opacity:.50; 
    -moz-opacity:.50; 
    -ms-filter:"alpha(opacity=50)";
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50; 
    background: url('../img/system/ajax.gif') no-repeat center #f8f8f8;
}

Answer 7

Вы можете сделать это с атрибутом align

<div id="mydiv" align="center">
 <img src="/Content/ajax-loader.gif" class="ajax-loader"/>
</div>