如何在中心底部顯示固定元素

Question

我想在完美中心顯示<div class="fe"></div>。當我使用left: 50%;它的作品，但沒有顯示在完美的中心。

.fe { 
    position: fixed; 
    bottom: 0; 
    left: 50%; 
    width: 150px; 
    height: 50px; 
    background-color: black; 
} 

Answer 1

方法1：

添加transform: translateX(-50%)。

body { 
 
    background: #ccc; 
 
} 
 
.fe { 
 
    transform: translateX(-50%); 
 
    background-color: black; 
 
    position: fixed; 
 
    width: 150px; 
 
    height: 50px; 
 
    bottom: 0; 
 
    left: 50%; 
 
}

<div class="fe"></div>

方法2：

使用負餘量等於元件寬度的一半。即你有width的.fe150px所以使用margin-left: -75px

body { 
 
    background: #ccc; 
 
} 
 
.fe { 
 
    background-color: black; 
 
    margin-left: -75px; 
 
    position: fixed; 
 
    width: 150px; 
 
    height: 50px; 
 
    bottom: 0; 
 
    left: 50%; 
 
}

<div class="fe"></div>

Answer 2

可以轉換元件移動50％留給自己的大小：

transform:translateX(-50%); 

像這樣：

.fe { 
    position: fixed; 
    bottom: 0px; 
    left: 50%; 
    transform:translateX(-50%); 
    width: 150px; 
    height: 50px; 
    background-color: black; 
} 

Answer 3

而不是將左側設置爲50％，設置左側= 0和右側= 0，邊距=自動..這將自動居中居中。

.fe { 
position: fixed; 
bottom: 0px; 
left: 0; 
right: 0; 
margin: auto; 
width: 150px; 
height: 50px; 
background-color: black; 
} 

Answer 4

嘗試使用margin-left和margin-right如下所示

margin-left: auto; 
margin-right: auto; 

同時設置這些到auto將集中的分割。有關這方面的更多信息，請參閱​​。

Answer 5

您可以使用屬性ALIGN = 「中心」 的div

.fe{ align="center" 
    } 

或者在DIV可以定義

<div class="fe" align="center"></div> 

Answer 6

試試這個transform: translateX(-50%);屬性添加到您的代碼

.fe { 
position: fixed; 
bottom: 0px; 
left: 50%; 
width: 150px; 
height: 50px; 
background-color: black; 
transform: translateX(-50%); 
margin:auto; 
}