css 的flex容器，有一行标题时，怎样让下个容器全局居中

Question

让middle站在container正中心。（红框位置）

它只能在自己容器中居中。

<div class="container">
    <div id='title'>title</div>
    <div id='middle'>middle</div>
</div>

<style type="text/css">
.container {
    display: flex;
    flex-direction: column;
    height: 300px;
    border: 1px solid red;
}
#title {
    height: 150px;border: 2px solid green
}
#middle {
    font-size: 3rem;
    flex: 1 1 auto;
    align-self: center
}
</style>

目标是红框位置

Answer 1

html

<div class="container">
    <div id='title'>title</div>
    <div id='middle'>middle</div>
</div>

css

.container {
    display: flex;
    flex-direction: column;
    aign-items: center;
    justify-content: center;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
#title {
    position: absolute;
    width:100%;
    height: 150px;
    border: 2px solid green;
    top:0;
}
#middle {
    font-size: 3rem;
    align-self: center
}