顶部垂直对齐div css

Question

我不知道父元素的高度。 我使用：

垂直对齐子div

position:  absolute;
top: 50%;
transform: translateY(-50%);

如何在top10％-part中以相同的方式对齐div？子div应该在父div的10％之后垂直开始。

＆＃13;

＆＃13;

.text-image.flag {
  width: 25px;
  height: 25px;
  position: absolute;
  margin-left: 0px;
  margin-right: 0px;
  top: 50%;
  transform: translateY(-50%);
  float: right;
  right: -5px;
  background: url(/flag.png) 0 0 no-repeat;
}

＆＃13;

<td class="firstColumn wide-cell index-cell tall-cell sorting_1">
  <div class="inner-wrapper" style="position: relative;">
    <div class="table-tooltip" index="7">
      <a href="">
        <div class="text-image">
          Real, Student
        </div>
        <div class="text-image flag"></div>
      </a>
    </div>
  </div>
</td>

＆＃13;

＆＃13;

＆＃13;

我想从firstColumn获得前10％，而不是来自内包装。

Answer 1

您可以在所有相关代码周围添加<div id="container>，并将其设置为position: relative;，以便您可以在子div上使用position: absolute;，因为绝对定位仅在其父级有效时才有效没有静态定位。

Answer 2

我想这会对你有所帮助。

.parent {
    border: 1px solid #ccc;
    width: 200px;
    height: 200px;
    display: table;
}
.child {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

<div class="parent">
	<div class="child">
		This is content.
	</div>
</div>