前端布局篇之文字居中显示

在进行前端布局的时候，经常需要将文字在一个盒子内上下左右居中显示，比如按钮，导航栏内的一个盒子等。

<p class="text"></p>

.text{
            width: 300px;
            height: 100px;
            background-color: pink;
            line-height: 100px;
            text-align: center;
        }

显示效果：

line-height 是设置行高，给个等于盒子高度的大小，文字就会垂直居中显示在盒子内部；

text-align 是设置文字在盒子内部的对齐方式，有left right 和center三个值，center便是水平居中对齐。