Centering auto width content

Question

So, I'm making these tumblr themes and I'm having trouble centering an auto width element. I want the info box to be in the very center of the picture (and now it's not):

http://38.media.tumblr.com/200719998b2a013bf244db059eb89559/tumblr_nars2tF6t51tko1yno1_500.png

The width of the box is not a constant, because the number (note count) could have from one to many numbers.

The current code is:

#info {
background-color:{color:Info Background};
color:{color:Text};
font-size:10px;
font-family:cambria;
line-height:160%;
width:120%;
height:18px;
opacity:0.8;
letter-spacing:1px;
text-align:center;
z-index:2;
}

#posts:hover .i {
opacity:1.0;
    transition-duration: 0.6s;  
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s;  
z-index:2;
}

.i {
opacity:0.0;
width:auto;
    position:absolute;
    left:50%;  /* my mistake is here somewhere, I guess*/
    top:50%;
    transition-duration: 0.6s;  
    -moz-transition-duration: 0.6s;  
    -webkit-transition-duration: 0.6s;  
    -o-transition-duration: 0.6s;
z-index:2;
}

possible duplicate of [How to center absolute element in div?](http://stackoverflow.com/questions/1776915/how-to-center-absolute-element-in-div) — Paulie_D, Aug 23 '14 at 17:48

score 0 · Answer 1 · answered Aug 23 '14 at 17:31

0

set the element you want centered to display: block then its margin-left and margin-right to auto

answered Aug 23 '14 at 17:31

First reasonable answer. But maybe he has a good reason for using `position: absolute`? – Zaqx Aug 23 '14 at 17:36

score 0 · Answer 2 · answered Aug 23 '14 at 17:32

0

The best way to center any item in a div is to use margin:0 auto; It'd be easier to tell what else could be wrong if you included your html as well

answered Aug 23 '14 at 17:32

Jake Taylor

3,726
3
12
15

You can’t do this if the ‘item’ is `position: absolute` – Zaqx Aug 23 '14 at 17:38
Good Call. Didn't catch that – Jake Taylor Aug 23 '14 at 17:40
Also disagree that this is the best way to do centering. IMO the *best* way would be to set `display: flex;` and `justify-content: center;` on the parent element. – Zaqx Aug 23 '14 at 17:41
@Zaqx Agreed, but that really depends on the supported [browsers](http://caniuse.com/#feat=flexbox). One can always position absolute using the whole width and then using a static/relative element with a fixed width and `margin: 0 auto;`. – nietonfir Aug 23 '14 at 18:16
Wow...sounds to me like you just love being disagreeable Zaqx. Instead of critiquing everyone else's answers why don't you just stick to being helpful by answering questions with the knowledge you have. – Jake Taylor Aug 23 '14 at 22:09

score 0 · Accepted Answer · answered Aug 23 '14 at 17:54

If CSS level 3 is an option, you could use CSS transform translate() expression with negative values of -50% in order to center the absolute positioned element as follows:

EXAMPLE HERE

.i {
    position:absolute;
    left: 50%;
    top:  50%;

    transform: translate(-50%, -50%); /* I omitted vendor prefixes to keep
                                         This snippet short */
    transition-duration: 0.6s;
    z-index:2;
}

This is because a percentage value for transform functions refers to the size of bounding box.

It's worth noting that CSS transform is supported in IE9+.

Centering auto width content

3 Answers3