附着在容器底部的元素

Question

我正在尝试将一个点置于 div 内的中心。当我尝试

margin-bottom: 50%;

时，它会推动其他东西。我还尝试将

justify-content

和

align-items

设置为中心。

.slider{
    width: 20px;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;a
    position: relative;

    border: 2px solid black;
    border-radius: 20px;
}
.line{
    border-bottom: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}
.selector{
    width: 0px;
    height: 0px;
    border: 2px solid black;
}

<div class="slider">
    <div class="line">
        <div class="selector"></div>
    </div>
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
</div>

Answer 1

您可以完全消除

.line

div，

div

元素应该用于内容，而不是样式。

只需使用

repeating-linear-gradient

创建线条，然后照常居中。

这里我在水平和垂直中心添加了红线以显示居中的元素。

* {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

.slider {
  margin: 1em;
  width: 20px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background: linear-gradient(black 0.1em, transparent 0.1em);
  background-size: 100% 20px;
  /* 100px / 5 */
  background-position: 0 -2px;
  /* adjust for border size */
  border: 2px solid black;
  border-radius: 20px;
  position: relative;
}

.selector {
  width: 4px;
  height: 4px;
  background: black;
}


/* demo only */

.slider:before {
  /* horizontal line */
  content: "";
  position: absolute;
  height: 1px;
  width: 100%;
  background: red;
  left: 0%;
  top: 50%;
  translate: 0 -50%;
}

.slider:after {
  /* vertical line */
  content: "";
  position: absolute;
  height: 100%;
  width: 1px;
  background: red;
  left: 50%;
  top: 0;
  translate: -50%
}

<div class="slider">

  <div class="selector"></div>

</div>