header section footer 都是水平，垂直居中，文本内容居中
section的高度是根据文本内容自适应的，footer会一直在最下面
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body,p{
margin: 0;
}
p {
width: 1000px;
margin: 0 auto;/**容器水平居中**/
text-align: center;/**容器里面文本居中**/
background-color: red;
}
header, footer{
min-height: 60px;
line-height: 60px;
background-color: #ddd;
}
section {
position: relative;
height: calc(100vh - 120px);/**100vh 视口的高度- 头的高度和尾的高度*/
background-color: #005aa0;
display:flex;
align-items:center;
} </style>
</head>
<body>
<header>
<p>文字介绍2</p>
</header>
<section>
<p>主题内容的文字介绍</p>
</section>
<footer>
<p>底部文字介绍</p>
</footer>
</body>
</html>