css - Why does the Image move with the browser but doesnt stay centered? -

#border-search {     position: relative;     top: 50% !important;     left: 25% !important;     width: 100% !important;      margin-left: auto !important;      margin-right: auto !important;     display: none;     }        #border-search.center img {     position: absolute; top: 50%; left: 50%;     transform: translate(-50%, -50%);      width: 30%;      height: auto;     } 

how stay centered. ive tried many different things, dont work. display none needs stay since need show hide image. else need add thi work? want stay centered horizontally only

here js fiddle

http://jsfiddle.net/matsuiny2004/zffvcvkk/

you can try center current #border-search inner img element following change in css, relatively positioning image automatic (and equal) left- , right-margins, , making centered.

#border-search {     margin: 0 auto;     position: relative; }  #border-search img {     display: block;     margin: 0 auto;     position: relative; } 

the display: block; statement needed image considered block element can affected margin attributes.

check demo js fiddle validate said. :)