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

Question

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

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

Answer 1

方法一:

添加转换: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>

方法二:

使用等于元素宽度一半的负边距。即因为你的 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>