Horizontally center a <div> which width and height are absolute - html

Question

I read this post but still ain't able to center the inner <div> :
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
It must be related to the position: absolute; property but it is required in order to insert absolute-position <img> elements in the inner <div>.

Answer 1

Simple, add this:
.game {
right: 0;
left: 0;
margin: 0 auto;
}
Since the width is given left and right will not affect your elements width. margin: 0 auto; will do the positioning
Example:
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>

Answer 2

div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>

Answer 3

div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 0;
right:0;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
Just add
left: 0;
right:0;
To the game class, and it will be horziontally centered. The trick here is to set the position to left 50%, and margin left to minus 1 half of the container width. Let me know if this solves it for you.
EDIT: helpful comments have shown me that we do not need the margin left negative, we can just set the left and right attribute for horizontal alignment. This is better because it will work regardless of the width of the element

Answer 4

Here's another approach..
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>
http://www.codeply.com/go/E0xL0KyOkU

Answer 5

you can use the image as the background of the class game
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
height:300px;
font-family: Verdana;
text-align: center;
}
.game {
border: 5px solid black;
overflow: hidden;
position:relative;
left: 0;
top:28%;
right: 0;
margin: auto;
}
<div>
<div class="game" style="width: 100px; height: 100px;">
</div>
</div>

Answer 6

try this
div {
margin: 0 auto;
border: 5px solid orange;
width: 60%;
font-family: Verdana;
}
.game {
border: 5px solid black;
width:30%; margin:0 auto;
position: absolute;
left: 0;
right: 0;
padding: 0 20px;
}
<div>
<div class="game">
test
</div>
</div>