Horizontally center a
which width and height are absolute

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>.

I need it to insert `` elements which position is absolute in the inner `
`. Question edited. — Algorythmis, Feb 16 '17 at 15:17
Then you should use `position: relative` on `div.game` and may be `position: absolute` on `img`s. — Mohammad Usman, Feb 16 '17 at 15:18
`text-align` will only center `inline` elements - `div` elements are *not* inline, they are `block`. To center a div in another div, you'd normally use `margin: 0 auto;` on the child, *however*, this won't work with `position: absolute;`. Can you post an image or something that might help us see what you're after? I have a feeling you're approaching this the wrong way. — Tyler Roper, Feb 16 '17 at 15:21
It does not work when only the `` elements have `position: absolute;` property. The `
` elements also must have it. Edit : yes, maybe I'm on the wrong way. I'm going to post an image. — Algorythmis, Feb 16 '17 at 15:21
The div with class ="game" set margin-left:auto, margin-right:auto — meddy, Feb 16 '17 at 15:26
[This](https://i.snag.gy/gopIEL.jpg) is what happens when only the `` elements have `position: absolute`. [This](https://i.snag.gy/6x8dD3.jpg) is when the `
` element also has it. Edit : @meddy nothing happens. — Algorythmis, Feb 16 '17 at 15:27

AlexG · Accepted Answer · 2017-02-16T15:30:29.567

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>

score 2 · Answer 2 · answered Feb 16 '17 at 15:20

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>

L L · Answer 3 · 2017-02-16T15:35:15.723

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

Horizontally there are better solutions. As for vertical allignment this is a reliable and simple solution. — AlexG, Feb 16 '17 at 15:31

score 0 · Answer 4 · answered Feb 16 '17 at 15:24

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

score 0 · Answer 5 · answered Feb 16 '17 at 15:25

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>

score 0 · Answer 6 · answered Feb 16 '17 at 15:29

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>

Horizontally center a which width and height are absolute

6 Answers6

Example:

Horizontally center a
which width and height are absolute