css - 居中自动宽度内容

Question

因此，我在制作这些 tumblr 主题时遇到了将自动宽度元素居中的问题。 我希望信息框位于图片的正中央(现在不是):

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

盒子的宽度不是一个常数，因为数字(音符计数)可以有一个到多个数字。

当前代码为:

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

Answer 1

如果 CSS 级别 3 是一个选项，您可以使用 CSS 转换 translate()具有负值 -50% 的表达式，以便将绝对定位元素居中，如下所示:

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

这是因为转换函数的百分比值是指 bounding box 的大小.

值得注意的是 CSS 转换 is supported in IE9+ .