How to center an image vertically within a div?

Question

Talk to me, baby?

I wonder if there is some way to center an image dependent on another div (that would be text).

For example: I will create a div and put an image (icon) on the left side and a text on the right side.

My intention is to put more text inside this div, but whenever I put more text or shot, I have to center the image according to the text "Manually" changing the margin-top so that it looks visually beautiful! I wanted to know how to "center" the image vertically on inside the div.

.tabel{width: 100%;height: 90%;}
#espeesquertop {width: 60%;height:80%;margin-top: 5%;display:display: inline-block;}
#espeesquertop img{width:15%;margin-top: 25%;margin-left: 3%;display:}
#cont1 {float:right;width:70%;margin-right:5%;}
#cont1 p{font-size: 1em;line-height: 170%;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
#cont1 h2{margin-left:5%;}

    <div class="especi">
        <div class="tabel">
            <h2>Bem vindos ao Egito</h2>
            <div id="espeesquertop">
                    <img src="https://image.flaticon.com/icons/svg/3113/3113259.svg" alt="">
                    <div id="cont1">
                        <h2>Egito 1</h2><br><p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>



        </div>
    </div><br><br>

Answer 1

To align an image in the center, first you must define its height and width using the attributes WIDTH E HEIGHT

After setting the height and width, it is important that you set its position, through the following attribute: position:absolute

You should define a negative margin-top and margin-left with half the value of height and width, for example: If my image is 200px high and 200px wide, I define margin-top:-100px; margin-left:-100px;

After that you set top:50% left:50%

Aqui é a resposta completa:

#centralizar{
    width:200px;
    height:200px;
    position:absolute;
    margin-top:-100px;
    margin-left:-100px;
    top:50%;
    left:50%;
}

There are other ways to center images:

  left: 50%;
  position: absolute;
  transform: translateX(-50%);

If necessary center within a div:

div img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 2

It’s a little messy!! Just use flex display in the div container of the items, and in each element, put a div for each and put a flex-Basis with the percentage for each element. In this case I put only the flex display in the parent div and the image already centered, then just distance the text either with the flex-Basis or with the margin-left.

.tabel{width: 100%;height: 90%;}
#espeesquertop {
width: 60%;height:80%;margin-top: 5%;
display: flex;}
#espeesquertop img{width:15%;margin-top: 25%;margin-left: 3%;}
#cont1 {float:right;width:70%;margin-right:5%;}
#cont1 p{font-size: 1em;line-height: 170%;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}
#cont1 h2{margin-left:10%;}

<div class="especi">
        <div class="tabel">
            <h2>Bem vindos ao Egito</h2>
            <div id="espeesquertop">
                    <img src="https://image.flaticon.com/icons/svg/3113/3113259.svg" alt="">
                    <div id="cont1">
                        <h2>Egito 1</h2><br><p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>  
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>  
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc<br>



        </div>
    </div><br><br>