There is a div inside it img arbitrary size. It should be done so that the center of the div and img are the same, more clearly in the picture:

Centering

About margin: 0 auto horizontal alignment I know, but how to combine it with vertical alignment?

    5 answers 5

    You can resize the photo here .

     *{ margin:0; padding:0; } html,body,.items{ width:100%; height:100%; } .items{ display:flex; align-items:center; justify-content: center; } img{ display:block; max-width:300px; } 
     <div class="items"> <div class="item"><img src="https://get.wallhere.com/photo/women-model-blonde-minidress-red-photography-dress-fashion-hair-clothing-color-girl-beauty-lady-leg-blond-hairstyle-photo-shoot-abdomen-human-body-136579.jpg" alt=""></div> </div>

      Align items vertically made easier with the advent of flexbox.

       .container { width:300px; height: 200px; display: flex; align-items: center; justify-content: center; border: 1px solid #ccc; } .container img { border: 1px solid #ccc; } 
       <div class="container"> <img src="http://htmlbook.ru/themes/hb/img/logo.png"> </div>

        https://jsfiddle.net/bv3csdkg/6/

         #out{ position: relative; } #cent{ position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } 
         <div id="out" style="width: 100px; height: 200px; background-color: red"> <div id="cent" style="width: 50px; height: 50px; background-color: blue"> </div> </div>

        To margin: auto; worked vertically, it is necessary that the block (in our case img), was with position: absolute; on all sides ( left: 0; top: 0; right: 0; bottom: 0; ).

         .img-block {display: block; width: 300px; height: 250px; background: red; position: relative;} .img-block img {display: block; width: 200px; height: 100px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;} 
         <div class="img-block"> <img src="http://via.placeholder.com/200x100"> </div>

        • Also, so that the block with position: absolute does not crawl over the edges of the parent, it is necessary that the parent has position: relative; - CbIPoK2513

         .image { width: 300px; } .image-box { position: relative; overflow: hidden; height: 0; padding-top: 70%; } .image-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } .image-content img { position: absolute; top: 50%; max-width: 100%; -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%); -ms-transform: translate(0,-50%); -o-transform: translate(0,-50%); transform: translate(0,-50%); } 
          <div class="image"> <div class="image-box"> <div class="image-content"><img src="http://i.ucrazy.ru/files/i/2012.10.16/1350382464_1325775613_4.jpg" alt=""></div> </div> </div>