移动端固定头部底部，头部内容居中

*{

　　margin:0;

　　padding:0

}

body, html, .body{

　　height:100%;

　　width:100%;

}

.body{

　　display: flex;

　　flex-direction: column;

}

.box1{

　　display: flex;

　　justify-content: space-between;

　　align-items: center;

　　height:50px;

　　line-height:50px;

　　background:red;

　　color:#fff;

}

.content{

　　display: flex;

　　flex: 1;

　　overflow-y: auto;

}

.footer{

　　height:50px;

　　line-height: 50px;

　　background:blue;

　　text-align: center;

}

.header1, .header3{

　　width:10%;

　　vertical-align: middle;

　　line-height: 50px;

　　text-align: center;

}

.header2{

　　width:80%;

　　text-align: center;

}

 

html

<div class="body">

　　<div class="box1">

　　　　<div class="header1"><</div>

　　　　<div class="header2">容</div>

　　　　<div class="header3"></div>

　　</div>

　　<div class="content">内容</div>

　　<div class="footer">底部</div>

</div>