CSS Vertically center variable height

Question

I know this one's being asked frequently but even after reading countless threads and trying pretty much everything from table to absolute stretch positioning I still just can't figure out where my mistake lies.

The idea is to set up a simple square-grid gallery. Horizontally and vertically centered titles (sometimes there are multi line titles, so no line-height solutions).

However no matter what I try, the title will be stuck to the top instead of vertically centered.

Please have a look, here's the snippet. Any help would greatly be appreciated.

* {
  padding: 0px;
  margin: 0px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#gallery a {
  display: table;
  float: left;
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-decoration: none;
}

#gallery a:hover {
  background-size: 110% 110%;
}

#gallery div {
  display: table-cell;
  width: 100%;
  height: 100%;
  text-align: center;
 vertical-align: middle;
  position: absolute;
  background-color: rgba(255,255,255,0.9);
  opacity: 0;
}

#gallery a:hover div {
 opacity: 1;
}

#gallery:after {
 content: "";
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

<div id="gallery">
   <a href="#" style="background-image: url(http://www.kipperdesign.ch/test/img/projects/more/placeholder-4.jpg)"><div>Short Description Project 1</div></a>
   <a href="#" style="background-image: url(http://www.kipperdesign.ch/test/img/projects/more/placeholder-7.jpg)"><div>Short Description Project 2</div></a>
   <a href="#" style="background-image: url(http://www.kipperdesign.ch/test/img/projects/more/placeholder-4.jpg)"><div>Short Description Project 3</div></a>
   <a href="#" style="background-image: url(http://www.kipperdesign.ch/test/img/projects/more/placeholder-7.jpg)"><div>Short Description Project 4</div></a>
  </div>

`but even after reading countless threads` --> not sure your read enough threads — Temani Afif, Mar 02 '18 at 10:48

score 0 · Answer 1 · answered Mar 02 '18 at 10:46

Use display flex instead of display table-cell.

P.S : Please check cross browser compatibility as flex property is not supported by all browsers.

* {
  padding: 0px;
  margin: 0px;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#gallery a {
  display: table;
  float: left;
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-decoration: none;
}

#gallery a:hover {
  background-size: 110% 110%;
}

#gallery div {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  text-align: center;
 vertical-align: middle;
  position: absolute;
  background-color: rgba(255,255,255,0.9);
  opacity: 0;
}

#gallery a:hover div {
 opacity: 1;
}

#gallery:after {
 content: "";
 display: block;
 clear: both;
 visibility: hidden;
 height: 0;
}

<div id="gallery">
   <a href="#" style="background-image: url(http://www.kipperdesign.ch/test/img/projects/more/placeholder-4.jpg)"><div>Short Description Project 1</div></a>
   <a href="#" style="background-image: url(http://www.kipperdesign.ch/test/img/projects/more/placeholder-7.jpg)"><div>Short Description Project 2</div></a>
   <a href="#" style="background-image: url(http://www.kipperdesign.ch/test/img/projects/more/placeholder-4.jpg)"><div>Short Description Project 3</div></a>
   <a href="#" style="background-image: url(http://www.kipperdesign.ch/test/img/projects/more/placeholder-7.jpg)"><div>Short Description Project 4</div></a>
  </div>

being fast is good ... but providing explanation is better – Temani Afif Mar 02 '18 at 10:48 — Temani Afif, Mar 02 '18 at 10:48

CSS Vertically center variable height

1 Answers1