Center an item with position: relative

Question

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.

user_7183314 · Answer

Much simpler:

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

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

user_5388390 · Answer

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;
}

Center an item with position: relative

5 Answers