显示表格和位置绝对值

Question

我需要inner元素来填写outer元素吗？如何使用display：table和position：absolute？

display:table元素必须具有以下属性

  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;

码

<div class="outer">
  <div class="position">
    <div class="inner">test</div>
  </div>
  <div>
    hdksksk<br>
    kdkd<br>
    hehe
  </div>
</div>

.outer {
  position:relative;
  width:100px;
  border:1px solid black;
}

.position {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:table;
}

.inner {
  display:table-cell;
  background:red;
}

https://jsfiddle.net/kgtd6v14/7/

Answer 1

这是你要找的吗？

.position {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height: 100%;
  width: 100%;
  display:table;
}

Answer 2

请尝试以下css：

请参阅Fiddle Demo

CSS：

.outer {
  position:relative;
  height:100px;
  width:100px;
  border:1px solid black;
}

.position {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.inner {
  height: 100%;
  background:red;
}

Answer 3

你说：父母的身高并不具体

Css的变化：

.position {
  width: 100%;<----------Added
  //More code....
}

插入Jquery：

$('.inner').css('height',$('.outer').height());

$(document).ready(function(){
  $('.inner').css('height',$('.outer').height());
})

.outer {
  position:relative;
  width:100px;
  border:1px solid black;
}

.position {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:table;
  width: 100%;
}

.inner {
  display:table-cell;
  background:red;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="outer">
  <div class="position">
    <div class="inner">test</div>
  </div>
  <div>
    hdksksk<br>
    kdkd<br>
    hehe
  </div>
</div>

Answer 4

不确定我是否有疑问。但如果我理解正确，那就试试这个：

.outer {
  position:relative;
  height:100px;
  width:100px;
  border:1px solid black;
}

.position {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  display:table;
  height: 100%;
  width: 100%;
}

.inner {
  display:table-cell;
  background:red; 
  vertical-align: middle;
  text-align: center;
}

您的.position应该具有相同的尺寸以包含其父div，并且为了使.inner居中，只需添加此语句vertical-align: middle＆amp; text-align: center。