Не могу центрировать изображение в Div

Question

<div style={{textAlign:'center !important',margin:'0 auto !important'}}>
     <img className="lazy" src={require("../images/dragonfire.jpg")} style={{display:'block !important', margin:'auto !important', position:'absolute', left:'0',right:'0',top:'0',bottom:'0',height:'40em',width:'40em'}}/>
</div>   

Я просмотрел здесь много постов и внешних сайтов по этой теме, и, похоже, ничего не работает.У меня есть большое изображение, которое я просто хочу, чтобы оно было в центре экрана.Div - это фон для баннера на странице.Я могу получить его до нужного размера, но он просто показывает левую половину изображения, я не могу получить его по центру и просто обрезаю левую и правую стороны в зависимости от сторон экрана.

Answer 1

Попробуйте удалить:left:'0',right:'0',top:'0',bottom:'0'

Это фиксирует положение вашего изображения в верхнем левом углу.

Также, как @Daniel упомянул в комментариях, измените position:absolute на relative, так какон ограничивает поток содержимого внутри div.

Вот рабочая модель:

div{
  background: red;  /*Just for clarrification case*/
  textAlign: center !important;
  margin: 0 auto !important;
}

img{
 display: block !important;
 margin: auto !important;
 position: relative;
 height: 100px;
 width:100px;
}

<div>
     <img className="lazy" src="http://mxtrianz.me/wp-content/uploads/2017/05/small-pictures-20-the-data-lab.jpg"/>
</div>   

PS Прокомментируйте свой код: пожалуйста, попробуйте использовать внешнее или внутреннее оформление и откажитесь от использования встроенного оформления, так как это уменьшает читабельность вашего кода.