Placing an image in the middle of a div - html

Question

I want to place a 100px x 100px image in the middle of a 210px width div. Please help. 1em=10px
#sidebox > .centered {
text-align: center;
margin-left: em;
height: 10em;
width: 10em;
margin-top: 10em;
position: absolute;
background-position: center center;
background-size: cover;
border: 0.5em solid;
border-radius: 100%;
border-color: #2c3e50;
background-image: url();
}
<div id="sidebox">
<p>
<div class="centered"></div>
</p>

Answer 1

You can align your image <img> center of outer div by below property's
margin:0 auto; OR this only works for aligning text or image text-align:center;

Answer 2

Might you just need to centre align 100x100px image in 210px width wrapper.
You can centre align inline element using text-align:center;
HTML
<div id="sidebox">
<img width="100px" height="100px" src="https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg"/>
</div>
CSS
#sidebox{
width: 210px;
text-align:center;
background: #eee;
}
JSFIDDLE DEMO

Answer 3

The most important point, mentioned by others, is that text-align:center must apply to the to the box the image is being centered in, not the image itself.
You have other problems:
position:absolute will shrink the effective image width to zero for centering purposes, so the left edge will be centered.
You are using a <div> like an <img>, but it won't center like an <img> unless it is styled with display:inline-block.
Before & After:
Before:
#sidebox {
font-size:10px; /*ADDED so 1em=10px*/
width: 210px; /*ADDED*/
border: 2px dashed red; /*ADDED*/
}
#sidebox > .centered {
text-align: center;
margin-left: em;
height: 10em;
width: 10em;
margin-top: 10em;
position: absolute;
background-position: center center;
background-size: cover;
border: 0.5em solid;
border-radius: 100%;
border-color: #2c3e50;
background-image: url(https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg);
}
<div id="sidebox">
<p>
<div class="centered"></div>
</p>
***TEXT ADDED***
</div>
After:
#sidebox {
font-size:10px;
width: 210px;
border: 2px dashed red;
text-align: center; /*ADDED*/
}
#sidebox > .centered {
display:inline-block; /*ADDED*/
/*text-align: center; REMOVED*/
margin-left: em;
height: 10em;
width: 10em;
margin-top: 10em;
/*position: absolute; REMOVED*/
background-position: center center;
background-size: cover;
border: 0.5em solid;
border-radius: 100%;
border-color: #2c3e50;
background-image: url(https://lh5.googleusercontent.com/-y2IopJORVh4/AAAAAAAAAAI/AAAAAAAAAD0/ePzQLLN6hKM/photo.jpg);
}