如何在中心设置内部 div，并根据内容大小平均上下展开

Question

我有一个带有文本div.的内部div，我试图将内部文本div保持在中间，并根据内容大小从顶部和引导大小平均增加文本div的大小。这是我到目前为止尝试的方法，也许我知道我可以做更多的改变来实现它。

.outerdiv{
	width:300px;
	height:300px;
	background:#fff;
	border:1px solid;
	display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
	position:relative;
	top:20%;
	left:35%;
}
.innerdiv{
	position:absolute;
	/*top:0;
	left:0;
	bottom:-45px;*/
	width:200px;
	height:200px;
	background:#ccc;
	margin:auto;
}
.textcontainer{
	margin:10px;
	padding:10px;
}
.textcomponent{
	border:1px solid;
	background: #b9a06f;
	color:#fff;
}

<div class="outerdiv">
<div class="innerdiv">
<div class="textcontainer">
<div class="textcomponent">
<h2>This is title section</h2>
<br/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>

Answer 1

你可以试试这个，你所需要的只是使内部成为一个弹性框容器，就像你对外部容器所做的那样

.outerdiv {
width: 300px;
height: 300px;
background: #fff;
border: 1px solid;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: relative;
top: 20%;
left: 35%;
}
.innerdiv {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background: #ccc;
margin: auto;
}
.textcontainer {
margin: 10px;
padding: 10px;
}
.textcomponent {
border: 1px solid;
background: #b9a06f;
color: #fff;
}

<div class="outerdiv">
<div class="innerdiv">
<div class="textcontainer">
<div class="textcomponent">
<h2>This is title section</h2>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>

Answer 2

如果我理解正确，您希望根据内容调整高度。所以我从外部删除了 Flex 以及 300px 的受限高度，我还删除了 innerdiv 的高度约束并将其设置为相对。

.outerdiv{
	width:300px;
	background:#fff;
	border:1px solid;
	display: block;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
	position:relative;
	top:20%;
	left:35%;
}
.innerdiv{
	position:relative;
	/*top:0;
	left:0;
	bottom:-45px;*/
	width:200px;
	background:#ccc;
	margin:auto;
}
.textcontainer{
	margin:10px;
	padding:10px;
}
.textcomponent{
	border:1px solid;
	background: #b9a06f;
	color:#fff;
}

<div class="outerdiv">
<div class="innerdiv">
<div class="textcontainer">
<div class="textcomponent">
<h2>This is title section</h2>
<br/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>

或者，如果您打算保持高度限制，则可以在 innderdiv 中隐藏溢出：

.outerdiv{
	width:300px;
	height:300px;
	background:#fff;
	border:1px solid;
	display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
	position:relative;
	top:20%;
	left:35%;
}
.innerdiv{
	position:absolute;
	/*top:0;
	left:0;
	bottom:-45px;*/
	width:200px;
	height:200px;
overflow:hidden;
	background:#ccc;
	margin:auto;
}
.textcontainer{
	margin:10px;
	padding:10px;
}
.textcomponent{
	border:1px solid;
	background: #b9a06f;
	color:#fff;
}

<div class="outerdiv">
<div class="innerdiv">
<div class="textcontainer">
<div class="textcomponent">
<h2>This is title section</h2>
<br/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>

Answer 3

你可以试试这个：

.outerdiv {
width: 300px;
padding: 50px 0;
background: #fff;
border: 1px solid;
display: flex;
margin: auto;
flex-wrap: wrap;
justify-content: center;
align-items: center;
position: relative;
}
.innerdiv {
width: 200px;
height: inherit;
background: #ccc;
margin: auto;
height: auto;
}
.textcontainer {
padding: 10px;
}
.textcomponent{
	border:1px solid;
	background: #b9a06f;
	color:#fff;
}

<div class="outerdiv">
<div class="innerdiv">
<div class="textcontainer">
<div class="textcomponent">
<h2>This is title section</h2>
<br/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>