Question

在我的标题中玩弄一些absoloute div。徽标，搜索栏等，并试图让它们居中。

保证金：0自动;是否使用元素设置为绝对值？

我知道一些选项可以将div放在100％宽度内，例如calc，transform，flex。是否有更多的中心100％选项？

Answer 1

是的，如果元素定位正确且指定了width，它将起作用。

在下面的示例中，添加了left: 0 / right: 0，以便元素相对于父级居中。例如：

＆＃13;

.container {
  position: relative;
}
.absolute {
  position: absolute;
  width: 80%;
  height: 40px;
  background-color: #000;
  margin: 0 auto;
  left: 0;
  right: 0;
}

＆＃13;

<div class="container">
  <div class="absolute"></div>
</div>

＆＃13;

或者，您也可以使用left: 50% / transform: translateX(-50%)的组合来水平居中元素。

＆＃13;

.container {
  position: relative;
}
.absolute {
  position: absolute;
  width: 80%;
  height: 40px;
  background-color: #000;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<div class="container">
  <div class="absolute"></div>
</div>

＆＃13;

保证金：0自动使用绝对div吗？

1 个答案: