Centering an image element within a div - html

Question

I'm following some tutorials on beginner's HTML and CSS. Im trying to center an image in a div, but when I shrink the window's width to a certain pixel, the image has less and less margin on the right. Here is the picture I took to demonstrate: https://imgur.com/Ihz0OeY. Here are the css codes:
.bg-image {
background-image: url("res/img/testbackground.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
width: 100%;
height: calc(100vh - 56px);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
bg-text {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
position: relative;
left:50%;
top:50%;
font-weight: bold;
transform: translate(-50%, -150%);
border: 3px solid #f1f1f1;
width: 80%;
padding: 20px;
text-align: center;
}
.bg-text img {
width:200px;
display: block;
margin-left: auto;
margin-right: auto;
}
I use position: relative because if I use absolute, the text wont be pushed down when the navbar expands. The HTML codes are nothing special, the nav bar I took from Bootstrap.
<div class="bg-image"></div>
<div class="bg-text">
<img id ="1" src="res/img/dog.png" alt="">
<h1>12345</h1>
<p>ABCDEF</p>
</div>
Can you guys help me? Thank you so much.

Answer 1

The problem is just that your img element is bigger than the screen size at a center width. Use a fluid width to solve this:
.bg-text img {
width:90%;
display: block;
margin: 0 auto;
}
A block level element always justifies left by default, which means if you don't tell the element to be contained within the window using a percentage-based width, the element will maintain its static width (in this case, 200px) even when the window shrinks beyond that number. Thus, the margin appears to shrink on the right. If you're using pixel-based widths, it's always best to declare it as a max-width, and define a percentage-based width as a fallback, like so:
.bg-text img {
width:100%;
max-width:200px;
display: block;
margin: 0 auto;
}
This means the element will be 200px wide and centered as long as the parent element is wider than 200px. If the parent element's width becomes less than 200px, the element will automatically become 100% of its parent's width.

Answer 2

You want this?
https://imgur.com/qkJP8pg
https://www.w3schools.com/code/tryit.asp?filename=G5P5BKV1XGGL
.bg-text img {
position: absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
width:90%;
}

Answer 3

In HTML:
<img src="..." class="mx-auto d-block">
or in CSS:
.bg-text img{
margin: auto;
display-block;
}