如何在父div中间放置子div?

Question

所以我有一个父div container我想把headerdiv和contentdiv放在里面就像图片中展示的那样这就是它的样子，问题是我的content-div没有被放在中间尽管我尝试了margin:auto"one_answers"align-text: center"建议。

任何想法?

代码:

<div class="container">

<div class="header-container">
<h1 class="element-title">{{tile.text}}</h1>
</div>

<div class="content-container" id="keyResourcesContainer"  *ngSwitchCase="'Key-Resources'">   
<div 
cdkDropList
id='Key Resources'
#keyResourcesList="cdkDropList"
[cdkDropListData]="keyResources"
class="example-list"
(cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of keyResources; let i=index " (dblclick)="updateCanvasElement(keyResources[i],i)" cdkDrag>

{{item.Designation}} 
</div>
</div>
</div>
</div>

Answer 1

flex属性是以下属性的简写:…flex属性设置弹性项的弹性长度

.parent
{
background-color:red;
height: 300px;
width:300px;
display:flex;
justify-content:center;
align-items:center;
}
.child
{
background-color:blue;
width:200px;
height:200px;
color: white;
text-align:center;
}

<div class="parent">

<div class="child">
Child Div
</div>
</div>