css width - 元素的宽度(自动)

Question

我目前有以下 CSS 样式:

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

这适用于宽度为 480px 的任何内容。问题是，我希望 margin-left 是动态的，以便它像 center 标签一样工作，它可以以这种方式将某些东西居中。

谁能帮我解决这个问题？

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

• 水平居中:

  • 方法一:(example here)

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

  • 方法 2:(example here)

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

• 垂直居中:

  • 方法一:(example here)

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