基于父元素定位并从左侧移动一点

Question

.parent-div {
  box-sizing: border-box;
  min-width: 0px;
  padding: 1rem;
  min-height: 1px;
  margin: 0;
  border: solid 1px;
}

.child-div-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  min-height: 400px;
  display: flex;
  border: solid 1px;
}

.child-div-one-of-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  flex: 1 0 calc(18% - 60px);
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child-div-one-of-one-of-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 395px; // this is dynamically calculated it can become any value bw 380 and 400px
  position: relative;
  display: -ms-flexbox;
  display: flex;
}

.button-new-one {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 120px;
  border-radius: 2px;
  cursor: pointer;
  padding: 6px 16px;
  position: absolute;
  bottom: 0;
}

.child-div-one-of-two {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  -ms-flex: 1 0 82%;
  flex: 1 0 82%;
  display: -ms-flexbox;
  display: flex;
  border: solid 1px;
}

.child-div-two {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  display: -ms-flexbox;
  display: flex;
}

.child-div-two-of-one {
  box-sizing: border-box;
  min-width: 0px;
  margin: 0 auto;
}

<div class='parent-div'>
  <div class='child-div-one'>
    <div class='child-div-one-of-one'>
      <div class='child-div-one-of-one-of-one'>
        <button class='button-new-one'>New One</button>
      </div>
    </div>
    <div class='child-div-one-of-two'></div>
  </div>
  <div class='child-div-two'>
    <div class='child-div-two-of-one'>
      <button class='button-less'>Less</button>
      <button class='button-more'>More</button>
    </div>
  </div>
</div>

在上面的 sn-p 中，即使我已经给出了margin: 0 auto，但它的定位在 div 的中心，但我希望它正好移动到 child-div-one-of-two 的中心， 我应该添加margin-left，还是我想将按钮居中而不是 100%，它应该是 82%

所以基本上越来越少的按钮应该正好位于上述 div 的中心。此外，如果上面的 div 获得更多内容，则应该向下移动越来越多的按钮，我该如何实现这两件事

感谢任何帮助

Answer 1

如果 82% 是已知值，只需将 padding-left: 9% 添加到 .child-div-two-of-one。

.parent-div {
  box-sizing: border-box;
  min-width: 0px;
  padding: 1rem;
  min-height: 1px;
  margin: 0;
  border: solid 1px;
}

.child-div-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  min-height: 400px;
  display: flex;
  border: solid 1px;
}

.child-div-one-of-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  flex: 1 0 calc(18% - 60px);
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child-div-one-of-one-of-one {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 395px; // this is dynamically calculated it can become any value bw 380 and 400px
  position: relative;
  display: -ms-flexbox;
  display: flex;
}

.button-new-one {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-width: 120px;
  border-radius: 2px;
  cursor: pointer;
  padding: 6px 16px;
  position: absolute;
  bottom: 0;
}

.child-div-one-of-two {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  -ms-flex: 1 0 82%;
  flex: 1 0 82%;
  display: -ms-flexbox;
  display: flex;
  border: solid 1px;
}

.child-div-two {
  box-sizing: border-box;
  margin: 0;
  min-width: 0px;
  display: -ms-flexbox;
  display: flex;
}

.child-div-two-of-one {
  box-sizing: border-box;
  min-width: 0px;
  margin: 0 auto;
  padding-left: 9%;
}

<div class='parent-div'>
  <div class='child-div-one'>
    <div class='child-div-one-of-one'>
      <div class='child-div-one-of-one-of-one'>
        <button class='button-new-one'>New One</button>
      </div>
    </div>
    <div class='child-div-one-of-two'></div>
  </div>
  <div class='child-div-two'>
    <div class='child-div-two-of-one'>
      <button class='button-less'>Less</button>
      <button class='button-more'>More</button>
    </div>
  </div>
</div>