最稳方案是父div设display: flex、flex-direction: column和明确height/min-height，子元素用margin-top: auto；line-height法仅适用于固定高单行文本；absolute需注意定位基准和塌陷问题；vertical-align对块级元素无效。
用 flex 布局把单行文字塞到 div 底部最稳
直接给父 div 加 display: flex 和 flex-direction: column，再用 margin-top: auto 推文字到底部。比老式 position: absolute 可靠，不用算高度，也不怕内容变化时错位。
- 必须设
height或min-height，否则 flex 容器没“底”可对齐 - 子元素只留一个文字容器（比如
p或span），别多套一层无关的div，否则margin-top: auto会失效 - 如果文字本身有多行，
margin-top: auto依然生效，但整块文字块会整体下沉，不是每行都贴底
line-height 大法只适用于固定高容器里的单行文本
当 div 高度确定、且文字绝不会换行时，设 line-height 等于容器高度，能快速让文字垂直居底。原理是行框被拉伸，文字自然沉到底边。
- 容器必须有明确
height，且overflow: hidden最好加上，防文字撑出边界 -
white-space: nowrap得配着用，不然一换行就全乱了 - 字体大小变化、padding 调整、或者加 border 都会影响实际对齐位置，每次改都得重新算
line-height
position: absolute 容易踩坑的三个点
虽然写起来快（bottom: 0），但脱离文档流后，父容器高度会塌陷，其他兄弟元素可能上移；而且一旦父容器有 transform 或 perspective，定位基准就偏了。
- 父
div必须设position: relative，否则bottom: 0会相对于整个页面定位 - 如果父容器用了
border-box但写了padding，bottom: 0是贴到内边距底边，不是内容区底边——要贴内容底就得用bottom: [padding-bottom 值] - 响应式场景下，文字字号随屏幕缩放，但
bottom值是固定的，容易在小屏上“浮起来”
vertical-align 对 inline 元素才起作用
很多人试过给文字加 vertical-align: bottom 没反应，是因为它只对 display: inline 或 inline-block 生效，而且是对齐到**行框底部**，不是容器底部。单独一个 div 里放文字，默认是块级，这个属性压根不触发。
立即学习“前端免费学习笔记（深入）”；
- 想硬用，得把文字包进
span，再给父div设font-size: 0清除空白间隙，再给span设vertical-align: bottom和正常font-size——太绕，不推荐 - 如果父容器里还有其他 inline 元素（比如图标、按钮），
vertical-align才有意义，否则纯属白忙
height: 100% 能继承父高，结果父容器没设高度，flex 或 absolute 全失效；还有就是忘了清除默认 margin 或 line-height 的干扰。这些细节不盯住，调半天也看不出哪错了。 
