使用纯CSS在未知尺寸的div内的9个可能位置中的任意一个位置上的未知尺寸的img | span | div位置

Question

I've asked a similar question and tried to modify it's answer for this but I'm not sure what to do.

I have a div of unknown dimensions and I need to place an img , span , or div in one of 9 positions within it.

• top left
• top middle
• top right
• center left
• center middle
• center right
• bottom left
• bottom middle
• bottom right

The question from above works for images but not with anything of unknown dimensions.

I've tried various combinations but cannot figure it out. http://jsfiddle.net/g7hydky2/3/ is what I'm working with.

The only thing I can think of is using display: table and display: table-cell on the outer and inner elements because then I can fully use vertical-align and text-align . However, this seems like a bad hack and I feel like there has to be a better way.

Also, I need this to work on IE 8...

Answer 1

Solved with flexbox ,

Acknowledging this article - Getting Dicey with Flexbox

.pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: black;
}
.one {
  justify-content: flex-start;
  align-items: flex-start;
}
.two {
  justify-content: center;
  align-items: flex-start;
}
.three {
  justify-content: flex-end;
  align-items: flex-start;
}
.four {
  justify-content: flex-start;
  align-items: center;
}
.five {
  justify-content: center;
  align-items: center;
}
.six {
  justify-content: flex-end;
  align-items: center;
}
.seven {
  justify-content: flex-start;
  align-items: flex-end;
}
.eight {
  justify-content: center;
  align-items: flex-end;
}
.nine {
  justify-content: flex-end;
  align-items: flex-end;
}

 body { text-align: center; } .dice { width: 50px; height: 50px; padding: 5px; border: 1px solid grey; border-radius: 15px; display: inline-flex; vertical-align: top; margin: 10px; } .pip { width: 10px; height: 10px; border-radius: 50%; background: black; } .one { justify-content: flex-start; align-items: flex-start; } .two { justify-content: center; align-items: flex-start; } .three { justify-content: flex-end; align-items: flex-start; } .four { justify-content: flex-start; align-items: center; } .five { justify-content: center; align-items: center; } .six { justify-content: flex-end; align-items: center; } .seven { justify-content: flex-start; align-items: flex-end; } .eight { justify-content: center; align-items: flex-end; } .nine { justify-content: flex-end; align-items: flex-end; } 

 <div class="dice one"> <div class="pip"></div> </div> <div class="dice two"> <div class="pip"></div> </div> <div class="dice three"> <div class="pip"></div> </div> <div class="dice four"> <div class="pip"></div> </div> <div class="dice five"> <div class="pip"></div> </div> <div class="dice six"> <div class="pip"></div> </div> <div class="dice seven"> <div class="pip"></div> </div> <div class="dice eight"> <div class="pip"></div> </div> <div class="dice nine"> <div class="pip"></div> </div> 

---

For absolute certainty {pun intended} and older browswer support use positioning: Codepen Demo