<div class="container">
    <div class="box"></div>
</div>

<style>
.container{
    display:flex;
    height: 100vh;
    align-items:center;
    justify-content:center;
}
.box{
    width:200px;
    height:200px;
    background:#ff0;
}
</style>

<div class="container">
    <header>Header</header>
    <div class="content">
        <main>Main</main>
        <nav>Nav</nav>
        <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
</div>
<style>
.container{
    display:flex;
    /* 垂直*/
    flex-direction: column;
    width:100%;
    /*视口被均分为100单位的vh 占据整个窗口*/
    min-height:100vh;
    text-align: center;
}
header,footer{
    /*放大缩小比例为0 占据垂直方向80px*/
    flex:0 0 80px;
}
.content{
    display: flex;
    /*1 1 auto 后两个值省略*/
    flex:1;
}
nav{
    /*默认 0 数值越小 排列越靠前*/
    order:-1;
    flex:0 0 80px;
}
aside{
    flex:0 0 80px;
}
main{
    flex:1;
}
</style>

<section class="grid">
    <div class="title">title</div>
    <div class="nav">nav</div>
    <div class="main">main</div>
    <div class="aside">aside</div>
    <div class="footer">footer</div>
</section>
<style>
.grid {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 80px 1fr 1fr 1fr 80px;
    grid-template-rows: 80px 1fr 1fr 80px;
    grid-template-areas: ‘title title title title title‘
                     ‘nav main main main aside‘
                    ‘nav main main main aside‘
                    ‘footer footer footer footer footer‘;
    font-size: 30px;
    text-align: center;
}
.title {
    grid-area: title;
}
.nav {
    grid-area: nav;
}
.main {
    grid-area: main;
}
.aside {
    grid-area: aside;
}
.footer {
    grid-area: footer;
}
</style>