Center an item with position: relative

I've got a menu that appears on hover over an absolutely positioned div. All of the menu items have to be relatively positioned because the absolutely div will appear multiple times on a page and will appear in multiple sizes in one instance.

How would I center multiple items with position: relative both vertically and horizontally when I won't know the the size of the parent div?

I know the position: absolute trick with negative margins, but this situation calls for something different.

Here's the code:

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

I've got it to center the items horizontally; it's getting the vertical that's being a bit elusive.

Much simpler:

position: relative; 
left: 50%;
transform: translateX(-50%);

You are now centered in your parent element. You can do that vertically too.

Alternatively, you may also use the CSS3 Flexible Box Model. It's a great way to create flexible layouts that can also be applied to center content like so:

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}

If you have a relatively- (or otherwise-) positioned div you can center something inside it with margin:auto

Vertical centering is a bit tricker, but possible.

You can use calc to position element relative to center. For example if you want to position element 200px right from the center .. you can do this :

#your_element{
    position:absolute;
    left: calc(50% + 200px);
}

Dont forget this

When you use signs + and - you must have one blank space between sign and number, but when you use signs * and / there is no need for blank space.

Another option is to create an extra wrapper to center the element vertically.

#container{
  border:solid 1px #33aaff;
  width:200px;
  height:200px;
}

#helper{
  position:relative;
  height:50px;
  top:50%;
  border:dotted 1px #ff55aa;
}

#centered{
  position:relative;
  height:50px;
  top:-50%;
  border:solid 1px #ff55aa;
}

<div id="container">
  <div id="helper">
    <div id="centered"></div>
  </div>
<div>