How can you center the image so that it does not constantly jump up and down?

html file

<h2>ЦГОК.РОФ.Фильтрация</h2> <div id="w-panel" > <object id="map-svg" type="image/svg+xml" data="images/FILTRATION_MAIN_1.svg" height="860px"></object> </div>

css

 body, html { max-width: 100%; max-height: 100%; margin: 0; font-family: helvetica; color: #000000; background: black; } #map-svg{ display:block; margin:50px auto 20px; } header{ text-align: center; color: black; background: white; font-size: 30px; }

    1 answer 1

    For centering something in css it is better to use flexbox. In the example below, I derived a block that will always be centered with respect to its parent.

     html, body{ height: 100%; } .parent{ width: 100%; height: 100%; background: blue; display: flex; justify-content: center; align-items: center; } .children{ width: 50px; height: 50px; background: red; } 
     <div class="parent"> <div class="children"></div> </div>

    • I'll try it now - Karter
    • Did the same but the block went up - Karter