Adel 'Sean' Helal Adel 'Sean' Helal - 1 month ago 11
CSS Question

Center multiple div vertically and responsively

I would like to build a vertical bar with dots on it that are equally spaced vertically. They should stay like that even if the window height change (dot size does not change but space between them changes). I would like to achieve this without using JS. First and last dot should stay on top and bottom of the bar. What is the best way to do this?

I wrote a codepen to make it easier:

<div class="wrap-side-bar">
<div style="position:relative;width:100%;height:100%;">

<div class="bar gradient"></div>
<div class="dot gradient"></div>
<div class="dot gradient"></div>
<div class="dot gradient"></div>
<div class="dot gradient"></div>
</div>
</div>


Exemple on codepen

Answer

You can use flexbox. Try the following solution:

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}
.container {
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:space-between;
  position:relative;
  width:100%;
}
.wrap-side-bar{
  width:30px;
  background-color:#FFF;
  height:100%;
  position:absolute;
  right:0px;
  padding:15px 0;
  z-index:-5;
}
.dot {
  background-color: green;
  border-radius: 10px;
  height: 20px;
  margin: 0 auto;
  width: 20px;
  z-index:20;
}
.bar{
  position:absolute;
  height:100%;
  width:10px;
  background-color:green;	
  margin:0 10px;
  border-radius:10px;
  z-index:-1;
}
.gradient{
  background-color:#00ca3e;
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#00ca3e, endColorstr=#0018ff);
  background-image:-moz-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:-webkit-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:-ms-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:-o-linear-gradient(top, #00ca3e 7%, #0018ff 100%);
  background-image:-webkit-gradient(linear, right top, right bottom, color-stop(7%,#00ca3e), color-stop(100%,#0018ff));
}
<div class="wrap-side-bar">
  <div class="container">
    <div class="bar gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
    <div class="dot gradient"></div>
  </div>
</div>