css - 如何在中间底部显示固定元素

我想在完美中心显示<div class="fe"></div>。当我使用left: 50%;时，它的作品没有显示在完美的中心。

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

最佳答案

方法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为.fe 150px，所以请使用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>