CSS center item with position:relative;

问题:

I've got a question for you CSS gurus out there!

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.

Your help would be HUGELY appreciated.

Edit:

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 its getting the vertical that's being a bit elusive. Thanks!

回答1:

More easier:

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

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

回答2:

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

回答3:

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.

回答4:

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.