历史遗留问题
起初，Web页面就是文档流的形式，它是不关注“页面高度”这个概念的，也没有“页”的概念。
Web页面就像一卷纸，需要浏览更多内容，可以下拉页面。
另外，实现垂直居中的属性，需要设计很多复杂的问题，如：
同一容器内有浮动元素和相对定位元素时，中线如何界定
同一元素即浮动又垂直居中改如何定位
CSS 元素可分为三类：inline、block、inline-block
方案一：line-height 方法
仅适用于单行文本，换行后失效
需要父容器高度已知
文本的line-height设置为父容器高度即可
父容器设置 text-align: center; 表示容器内文本对齐方式水平居中
#container { width: 500px; height: 200px; background: pink; text-align: center; } #line { background: white; line-height: 200px }方案二：position定位 + transform：translate(x,y)
适用于多行文本（前提是父容器高度足够高）
适用于块级元素
适用于父容器尺寸未知情况
父容器相对定位，子元素绝对定位
translate() 参数为百分数，表示位移距离为元素本身尺寸的百分比 relative（相对定位）：定位原点是元素本身所在位置； absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的 <!DOCTYPE html> <html> <head> <meta chaset="utf-8"> <title>inline 元素垂直居中</title> <style> #container { width: 500px; height: 200px; background: pink; position: relative; } #line { background: white; position: absolute; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div id="container"> <span id="line">我是 inline 元素</span> </div> </body> </html>补充：position定位 + calc() 指定子元素宽高实现水平垂直居中
calc() 参数为百分数，表示的是相对父元素的尺寸
适用于父容器尺寸未知的情况
#container { width: 500px; height: 200px; background: pink; position: relative; } #line, #id1 { background: red; position: absolute; left: 40px; top:20px; height: calc(100% - 40px); width: calc(100% - 80px); }方案三：display: table
适用于多行文本
适用于块级元素
父容器无法设置背景色
子元素设置 display: table-cell; vertical-align: middle;表示单元格垂直 居中对齐
子元素增加 text-align: center 可实现单元格水平居中对齐
#container { width: 500px; height: 500px; border: 2px solid pink; display: table; } #line { display: table-cell; vertical-align: middle; text-align: cente }方案四：display: flex
适用于多行文本
适用于块级元素
父容器设置 align-items: center;表示内部元素垂直居中对齐
父容器设置 justify-content: center; 可以实现内部元素水平居中对齐
#container { width: 500px; height: 500px; border: 2px solid pink; display: flex; align-items: center; justify-content: center } #line { background: pink; }方案五：display: grid
