html - 带翻译、左、右的 CSS 样式

Question

<style>
  .dropdown-menu-center {
  left: 50% !important;
  right: auto !important;
 -- text-align: center !important;
  transform: translate(-50%, 0) !important;
}
</style>  

我正在尝试使用 bootstrap 4 将下拉按钮的向下钻取列表居中...有人可以解释这种样式吗？我的理解是翻译使用 x 和 y 轴..为什么要使用剩下的 50%？为什么我不能将 translate(50%,0) 替换为 left ？或者只是用了 left 50% 和 right auto ，它不会被放在中心吗？

Answer 1

示例中的 right 属性无关紧要 - 暂时忽略它。

示例中的 left: 50% 声明该元素应偏移 50%。这意味着简单地添加 left: 50% 将把 .dropdown-menu-center 的左边缘放在正中间，元素的中心在它的右边(具体来说，页面 width 的一半加上元素 width 的一半)。

这与 transform: translate(-50%, 0); 相抵触，它将元素向左移动其 width 的 50%。因此，将其与 left: 0 组合会将 .dropdown-menu-center 的中心置于页面的正中心。

但是，重要的是要注意，如果您使用 relative positioning 中的任一个，这将仅有效。或 absolute positioning :

.dropdown-menu-center {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

<div class="dropdown-menu-center"></div>

希望对您有所帮助! :)