Можно ли центрировать это?

Question

EDIT: Я решил его с этим: (Спасибо всем, кто ответил)

var intDuration = 50; 
setInterval(
function(){ 
    $('#image').animate({"margin-left": "-=0.05%", "margin-top": "-=0.05%", "width": "+=0.1%"}, 'slow'); 
}, 
intDuration 
); 

Так что я JavaScript, который добавляет 0,1% ширины каждые 50 мс, единственная проблема состоит в том, что она становится uncentered после нескольких секунд (поскольку это добавляет ширину). Есть ли какое-либо решение для этого через javascript/css?
Вот JavaScript:

var intDuration = 50; 
    setInterval(
     function(){ 
      $('#image').animate({"width": "+=0.1%"},'slow'); 
    }, 
     intDuration 
    ); 

Вот мой CSS: (К сожалению, если он отформатирован страшно или много вещей являются избыточными)

.image { 
text-align: center; 
vertical-align: middle; 
background: #000; 
} 

.image img { 
width: 1%; 
position: fixed; 
top: 50%; 
left: 50%; 
margin-top: -50px; 
margin-left: -20px; 
} 

Вот мой HTML:

<div class="image"> 
<image src="image.png" id='image'/> 

JSFiddler: http://jsfiddle.net/Zane_/eERUA/

Answer 1

попробовать этот

http://jsfiddle.net/4GrQk/2/

.image img { 
    width: 1%; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -0.5%; 
    } 

    var intDuration = 50; 
setInterval(

function() { 
    var w = $('#image').width(); 
    var m = w/2; 
    $('#image').animate({ 
     "width": "+=5%", 
     "margin-left": -m+"%" 
    }, 'slow'); 
}, 
intDuration); 

Answer 2

Просто удалите position:fixed, так что text-align: center; будет центром для вас.

.image { 
text-align: center; 
vertical-align: middle; 
background: #000; 
} 

.image img { 
width: 1%; 
} 

Или использовать display:block и margin-left:auto, margin-right:auto

.image { 
    vertical-align: middle; 
    background: #000; 
    } 

.image img { 
width: 1%; 
display:block; 
margin-left:auto; 
margin-right:auto; 
} 

Answer 3

Ваш JS и HTML-файл появляется право, попробуйте изменить файл CSS, используя этот подход.

.image 
    { 
    text-align: center; 
    vertical-align: middle; 
    background: #000; 
    } 

Ниже вам необходимо установить margin: auto; Он автоматически установит ваше изображение в центральное положение.

.image img 
    { 
     width: 1%; 
     position: fixed; 
     margin: auto; 
    } 

Попробуйте это, может исправить вашу проблему

Answer 4

Попробуйте margin: 0 auto; или что-то подобное на #image.

Также подумайте о том, чтобы воспроизвести вашу проблему в jsbin или jsfiddle и поделиться ею с нами. Это поможет нам более точно понять вашу проблему и сделать ее более вероятной для решения проблемы.