css字体位置-在div内插入占位符标签以挤压下面的文本（不推荐）

CSS中的text-align属性只能控制文本在水平方向的左对齐（left）、右对齐（right）、居中（center），而不能控制文本在垂直方向的位置。 针对这种情况有以下几种解决方案

在div内插入占位符标签以挤压下面的文本（不推荐）

<div class="div">
        <div class="place"></div>
        我是祖父: 下面是爸爸
</div>
<style><span class="token language-css">
.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:absolutecss字体位置css字体位置，并使用四个属性来控制文本的位置。 设置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>