CSS寬度-width項目（自動）

Question

目前，我有以下CSS樣式：

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

這是罰款與480像素的寬度任何東西。事情是，我希望剩餘邊緣是動態的，以便它像中心標籤一樣工作，它可以以這種方式集中某些東西。

任何人都可以幫助我嗎？

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

變換：平移X（-50％）;結合我現有的CSS，做到了。 :)