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 · Answer

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

User · Answer

Another option is to create an extra wrapper to center the element vertically    x000D   x000D   container  x000D    border solid 1px  33aaff  x000D    width 200px  x000D    height 200px  x000D    x000D   x000D   helper  x000D    position relative  x000D    height 50px  x000D    top 50   x000D    border dotted 1px  ff55aa  x000D    x000D   x000D   centered  x000D    position relative  x000D    height 50px  x000D    top -50   x000D    border solid 1px  ff55aa  x000D    x000D   lt div id  container  gt  x000D     lt div id  helper  gt  x000D       lt div id  centered  gt  lt  div gt  x000D     lt  div gt  x000D   lt div gt  x000D   x000D   x000D

User · 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 · Answer

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

User · Answer

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

[css] Center an item with position: relative

Examples related to css

Examples related to alignment

Examples related to css-position

Examples related to center