html - 不设置高度的绝对居中内容

Question

.parent {
	background-color: gold;
	height: 400px;
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: .8em 1.2em;
	color: white;
	background-color: darkcyan;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

  <div class="group">
  <div class="left parent">
    <div class="child">
      <h1>helo</h1>
      <span>hi again</span> </div>
  </div>
  <div class="right">
    <div class="videoWrapper"> 
      <!-- Copy & Pasted from YouTube -->
      <iframe width="560" height="600" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen> </iframe>
    </div>
  </div>
  <div class="clearer"></div>
</div>

我的内容是居中的，但我希望它能在“组”类中占据全部高度。这是一个实时链接。 velnikolic.com/alohaSpeed 我对其他建议持开放态度，因为我知道这只是一种做事方式，但出于某种原因我发现它是唯一有效的代码。

Answer 1

没有高度你就不能绝对 content ，你必须将父 div 高度设置为 100% 或你需要的某个高度值，现在我只是删除 transform 属性 并使用calc()

设置最高值

.parent {
	background-color: gold;
	height: 400px;
	position: relative;
}
.child {
	position: absolute;
	top: calc(50% - 65px);
	left: 0;
	right: 0;
	width: 100px;
	text-align: center;
	margin: 0 auto;
	padding: .8em 1.2em;
	color: white;
	background-color: darkcyan;
}

<div class="group">
  <div class="left parent">
    <div class="child">
      <h1>helo</h1>
      <span>hi again</span> </div>
  </div>
  <div class="right">
    <div class="videoWrapper"> 
      <!-- Copy & Pasted from YouTube -->
      <iframe width="560" height="600" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen> </iframe>
    </div>
  </div>
  <div class="clearer"></div>
</div>