主页 / 问题 / 664011
Accepted
Eugen Eray
Asked:2020-05-10 15:03:30 +0000 UTC2020-05-10 15:03:30 +0000 UTC

居中 div，绝对位置在父级的宽度上

  • 772

有这样一个问题：你需要div.preview-box #timeCodeContainer在中心div.preview-box。我不知道该怎么做。transform: translate()并告诉我更多，对齐时是否比更准确margin:？这是代码：

div.preview-section {
  position: absolute;
  width: 100px;
  height: 70px;
  transform: translateY(-106%);
  margin-top: 200px;
}

div.preview-box {
  position: relative;
  width: 100px;
  height: 70px;
  background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  -webkit-background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  -moz-background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  -o-background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  -ms-background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  border: 1px solid rgba(0, 0, 0, 0.84);
  box-sizing: border-box;
  border-bottom: 0;
  box-shadow: inset 0 0 0 2px #363131;
  -webkit-box-shadow: inset 0 0 0 2px #363131;
  -moz-box-shadow: inset 0 0 0 2px #363131;
  -ms-box-shadow: inset 0 0 0 2px #363131;
  -o-box-shadow: inset 0 0 0 2px #363131;
}

div.preview-box #frameContainer {
  width: 96%;
  height: 58px;
  background: #E0E0E0;
  margin: 1px auto 0px;
}

div.preview-box #timeCodeContainer {
  width: 34px;
  font-size: 0.70em;
  background-color: #171616;
  text-align: center;
  position: absolute;
  color: white;
}
<div class="preview-section">
  <div class="preview-box">
    <div id="frameContainer"></div>
    <div id="timeCodeContainer">0:00</div>
  </div>
</div>

html

1 个回答

  1. Best Answer

    margin和之间的区别translate并不准确，但是margin您需要知道定位元素的绝对尺寸，而您translate不需要知道。

    居中定位的本质如下。您为要居中的子元素提供position、偏移量left: 50%和top: 50%。这些百分比是根据父项的大小计算的。因此，子元素的左上角恰好位于父元素的中心。但是子元素本身还是没有居中。有维度。如果它们已知，例如 100px 宽度和 60px 高度，您可以应用margin-left: -50pxand margin-top: -30px。但是当尺寸未知时怎么办？它会在这里有所帮助transform: translate(-50%, -50%)。由于此属性应用于子元素，因此所有百分比均根据其大小计算。

    div.preview-section {
  position: absolute;
  width: 100px;
  height: 70px;
  transform: translateY(-106%);
  margin-top: 200px;
}

div.preview-box {
  position: relative;
  width: 100px;
  height: 70px;
  background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  -webkit-background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  -moz-background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  -o-background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  -ms-background-image: linear-gradient(to top, #252323, rgba(0, 0, 0, 0.86));
  border: 1px solid rgba(0, 0, 0, 0.84);
  box-sizing: border-box;
  border-bottom: 0;
  box-shadow: inset 0 0 0 2px #363131;
  -webkit-box-shadow: inset 0 0 0 2px #363131;
  -moz-box-shadow: inset 0 0 0 2px #363131;
  -ms-box-shadow: inset 0 0 0 2px #363131;
  -o-box-shadow: inset 0 0 0 2px #363131;
}

div.preview-box #frameContainer {
  width: 96%;
  height: 58px;
  background: #E0E0E0;
  margin: 1px auto 0px;
}

div.preview-box #timeCodeContainer {
  width: 34px;
  font-size: 0.70em;
  background-color: #171616;
  text-align: center;
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
    <div class="preview-section">
  <div class="preview-box">
    <div id="frameContainer"></div>
    <div id="timeCodeContainer">0:00</div>
  </div>
</div>

    • 3

相关问题