css width -width of item（自动）

Question

我目前有以下CSS样式：

.center480
{
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -240px;
}

这适用于宽度为480px的任何东西。问题是，我想要左边距，是动态的，这样它就像中心标签一样，可以用这种方式居中。

任何人都可以帮我吗？

Answer 1

虽然它可能有less browser support，但您可以使用translateX / translateY方法。

• 水平和垂直居中：

  • 方法1 (example here)

    .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
    

  • 方法2 (example here)

    .container {
        position: absolute;
        top:0; right:0;
        bottom:0; left:0;
        margin:auto;
    }
    

• 横向居中：

  • 方法1：(example here)

    .container {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    

  • 方法2：(example here)

    .container {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
    }
    

• 垂直居中：

  • 方法1：(example here)

    .container {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    

Answer 2

transform：translateX（-50％）;结合我现有的CSS，做了诀窍。 :)