文字居于div底部的方式
CSS中的text-align属性只能控制文字在水平方向的左对齐（left），右对齐（right），居中（center）,控制不了垂直方向的文字位置，对此有以下解决方案
在div内部塞占位符标签，把文字挤到下方(不推荐)
<div class="div">
<div class="place"></div>
我是祖父: 下面是爸爸
</div>
<style>
.div { height: 100px; }
.place { height: 70px; }
</style>
不推荐这种方法是因为会增加占位标签，基于剃刀原理“如无必要，勿增实体”，所以放弃这种。
修改行高line-height属性
<div class="div">
我是祖父: 下面是爸爸
</div>
<style>
.div {
height: 100px;
line-height: 170px;
}
</style>
通常行高设置为元素高度的170%合适
使用相对定位控制
父元素设置position: relative，文字元素设置position: absolute,并用上下左右四个属性控制文字位置,设置bottom:0 即可文字局底。
<div class="div">
<p>我是祖父: 下面是爸爸</p>
</div>
<style>
.div {
height: 100px;
background-color: aquamarine;
position: relative;
text-align: center;
}
.div p{
position: absolute;
bottom: 0px;
padding: 0;
margin: 0;
}
</style>