0

I have a bunch of .item(s) that are floating left. Each of these elements have 12.5% defined in height.

How do I vertically center these elements to a 100% parent height div?

I've tried with the "classic" top: 50%, transform: translateY(-50%) approach, but noone of the floating elements appear (they render with 0px height).

<div class="centered-container">
  <div class="centered">
    <div class="item"></div>
    <div class="item"></div>
...etc
  </div>
</div>

CSS

.centered-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.centered {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  border: 1px solid red;
}

.item {
  float: left;
  width: calc(100% / 4);
  height: 12.5%;
  background-color: green;
  z-index: 99999;

  &:nth-child(2n)
  {
    background-color: brown;
  }
  &:nth-child(3n)
  {
    background-color: yellow;
  }
}

https://codepen.io/anon/pen/NomWmN

user1231561
  • 3,239
  • 6
  • 36
  • 55
  • the first think to do is to remove the float. Use inline-block or flexbox then the centring will be trivial – Temani Afif Feb 20 '19 at 11:04
  • You didn't set a height of your parrent element `.centered`. Once you do this your items appers. Do you want to vertically centered to a `.centered` div or `.centered-container`? – Dmitry S. Feb 20 '19 at 11:10
  • Dmitry S. - if I define height: 100% in .centered, then they wont center vertically, just appear at top: 0 - basically want the 4 rows if items to center – user1231561 Feb 20 '19 at 13:32

0 Answers0