CSS垂直居中可变高度

Question

我知道这个人经常被问到，但即使在阅读了无数线索并尝试从桌子到绝对拉伸定位的所有事情之后，我仍然无法弄清楚我的错误在哪里。

我们的想法是建立一个简单的方形网格图库。水平和垂直居中的标题（有时会有多行标题，因此没有行高解决方案）。

然而，无论我尝试什么，标题都会粘在顶部而不是垂直居中。

请看一下，这是片段。非常感谢任何帮助。

* {
  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>

Answer 1

使用display flex而不是display table-cell。

P.S：请检查浏览器的兼容性，因为所有浏览器都不支持flex属性。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;