如何在網站上放置一個元素？

Question

我想讓整個網站上的ID爲「all」的元素居中。我的代碼有問題嗎？它不能正常工作

#all{ 
    position: absolute; 
    width: 55%; 
    margin: 0 auto; 
    top: 150px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #EEEEEE; 
    box-shadow: 5px 5px 5px #808080; 
} 

Answer 1

使用left: 50%; transform: translateX(-50%);水平居中絕對定位的元素。

#all{ 
 
    position: absolute; 
 
    width: 55%; 
 
    top: 150px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: #EEEEEE; 
 
    box-shadow: 5px 5px 5px #808080; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div id="all">all</div>

Answer 2

嘗試編寫類似下面

#all{ 
    position: absolute; 
    width: 55%; 
    top: 150px; 
    left: 50%; 
    margin-left:-27.5%; 
    background-color: #EEEEEE; 
    box-shadow: 5px 5px 5px #808080; 
} 

Answer 3

我將與2D用它轉化爲在所有屏幕尺寸垂直對齊，因爲這樣：

.myClass { 
    position:fixed; 
    width: 55%; // or what ever fixed or precentage value 
    top: 50%; 
    left: 50%; 
    // height: 150px; // if height is known 
    // margin-top: -75px; // if height is known - minus half the height 
    transform: translate(-50%, -50%); // if height is unknown 
}