将宽度设置为50％时Div不居中

Question

当我把我的div放在中心时，它没有居中。看来，他的左角正好位于屏幕中间。如何将我的宽度的一半减去这个，我的div正确居中？

在我的CSS中，我写left: 50%，这就是结果：

有没有可能正确地将这个div居中？

Answer 1

transform: translateX(-50%)会将元素向左移动50％的宽度。与left: 50%配对，它将在x轴上居中。

Answer 2

延长迈克尔科克的答案：

transform: translate(-50%, -50%)

将元素水平和垂直移动一半的宽度/高度。

Answer 3

这是另一个让我在中心对齐div的逻辑

console.log(FRUBIL.device.marketname); // Galaxy S7

  var divWidth = $(".center").width();
  var rowWidth = $(".row").width();
  var a = (rowWidth - divWidth) / 2;
  $(".center").css("margin-left", a);

.center {
  background-color: green;
  height: 60px;
  text-align: center;
}