html - Centering An Image In CSS -

i cannot figure out how center image on mobile website.

here code using, beginner in css i'm sure easy fix. need help. thanks

#emotion-header-img {     display:none; } #emotion-header {     height:100px !important;     background-image:url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png") !important;     background-repeat:no-repeat !important;     background-size:contain !important; } 

assuming want element centered horizontally , vertically well:

/* generated howtocenterincss.com, tried , tested! */

#emotion-header {          display:flex;          justify-content:center;          align-items:center;          /* height:100px !important; no need if don't want limit size*/          background-repeat:no-repeat !important;          background-size:contain !important;  }    #emotion-header-img {              height: 100px;  }

<div id="emotion-header">    <img id="emotion-header-img" src="http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png" alt="image header" \>   </div>

of course there many many other possibilities, , things complicated when want add support old browsers ie7 or ie8. on before ie11 need use table cell. the above code snippet works ie11 , mordern browsers.

a relevant , resource i've found when trying center things in css howtocenterincss.com, generates right css based on settings , choices. in fact, contrary name of web app, handles sorts of alignments too. note generated code embedded inside html elements <style> tag, can extract whatever inside style tags , move css file use.