没有设置高度的绝对中心内容

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 property并设置顶部价值使用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>

Answer 2

您也可以使用弹性框样式来执行此操作（以下jsFiddle）。然后，您可以根据需要将高度值更改为百分比（我不确定您是否想要这样做）。

＆＃13;

＆＃13;

.parent {
	background-color: gold;
	height: 400px;
	position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
}
.child {
	
	width: 100px;
	text-align: center;
	margin: 0 auto;
	padding: .8em 1.2em;
	color: white;
	background-color: darkcyan;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;