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>