Image will not center - html

Question

I am having a really hard time with getting this image centered.
I have tried the following:
margin: 0 auto;
display: block;
text-align: center;
I really do not want to use the left command because it isn't working in my mobile setting. I just want a fixed property that will work everywhere and I won't have to add it again.
Why is this image not centering?
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
</div>
<img src="/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
I had also tried the below but it still doesn't work.
.approach-tablet {
bottom: 0;
position: absolute;
/*left: 50%;*/
}
img.approach-tablet {
display: block;
margin: 0 auto;
text-align: center;
}
I need the position: absolute to position the div where I am wanting it to go. It sits on the bottom of the page. Regardless, the image isn't centering with what is in there.

Answer 1

As indicated in this SO answer, an element that is positioned absolutely cannot be centered using the margin: 0 auto method and you would have to resort to other options.
One option would be to use left: 50% and then use transform: translateX(-50%) to get it back to the center. The left: 50% offsets the image 50% from the left edge of the page (but this alone will not center the image because the image's left edge is at page center). The translateX(-50%) moves the image to the left by half of the image's width and thus would result in the image's center being at page center.
This should work in all modern browsers (including mobile) as the browser support is good.
As can be seen from the snippet (view it in normal mode and full page mode), no special tweaking is needed for it to be responsive.
Note: Though you had stated that you don't want to use left property in the question, I understand based on your comment that the reason was that mobile support is needed and be responsive.
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: absolute;
left: 50%;
height: 200px;
transform: translateX(-50%);
}
<div id="section3-container">
</div>
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">

Answer 2

Please use below code
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>
CSS
#section3-container {
margin: 0 auto;
text-align: center;
width: 100%;
}
.approach-tablet {
height: 200px;
margin: 0 auto;
text-align: center;
width: auto;
}

Answer 3

Your image is outside of the div. If you put it inside, it centers
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
<div id="section3-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>

Answer 4

Just add another div, html is all about divs:
#section3-container {
position: absolute;
top: 25%;
text-align: center;
width: 80%;
margin: 0 10%;
}
.approach-tablet {
bottom: 0;
position: relative;
/*left: 50%;*/
height: 200px;
width: auto;
}
.approach-tablet img {
display: block;
margin: 0 auto;
}
#section4-container {
text-align: center;
width: 100%;
}
<div id="section3-container">
</div>
<div id="section4-container">
<img src="http://optimumwebdesigns.com/fullPage.js/examples/imgs/tablets.png" alt="tablets" class="approach-tablet">
</div>