css - 如何以百分比宽度居中绝对定位的图像？

Question

我有一个带有以下css的图像：

element.style {
    right: 50%;
    margin-right: -220px;
    top: 31%;
    width: 440px;
    position: absolute;
}

我需要更改它，以便将宽度设置为百分比（35.4％）。我还能将它居中并保持绝对位置吗？

Answer 1

当然，如果您想要与上面相同的方式，只需将35.4/2 = 17.7其用作您的保证金（DEMO）：

element.style {
    right: 50%;
    margin-right: -17.7%;
    top: 31%;
    width: 35.4%;
    position: absolute;
}

Answer 2

您可以使用水平居中

left:0; right:0; margin:auto;

所以如果你有一个 div 作为标记，css 将是

div
{
    top: 31%;
    width: 38%;
    height: 100px;
    position: absolute;
    left:0;right:0;
    margin: auto;
}

小提琴

只要您定义了宽度（以 px 或 % 为单位 - 没关系），这将起作用