本文将介绍盒子文字位置确定，适合有一定前端小基础学习，小白可自行补课，后续可能补加更多基础知识

如何让文字在我们的盒子垂直居中呢？

行高我们利用最多的一个地方是：可以让一行文本在盒子中垂直居中对齐。

做法就是：文字的行高等于盒子的高度。

这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。

行高line-height 等于 height 高度文字会垂直居中

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16</title>
</head>
<style>
	div{
		height: 50px; /*盒子高*/
		width: 200px;	/*盒子宽*/
		background-color: red;/*背景颜色*/
		line-height:50px;/*行高*/
		color: white；/*字体颜色*/
    text-align: center;/*字体水平居中*/
	}
	</style>
<body>
	<div>行高测量</div>
</body>
</html>

一种方法量取要制作盒子的文字下部基线（蓝色上下线）之间距离，通过行高确定盒子高度，另一种可以用浏览器开发者工具或者预览效果实时调节直至效果满意。

综上所述

如果行高 line-height 等 height 高度文字会垂直居中

如果行高 line-height 大于height 高度文字会偏下

如果行高line-height 小于height 高度文字会偏上

每天学点新知识，总有一天我们都会“学富五车”！

初出茅庐，如有不严谨之处敬请指正

图文来源:网络编辑加工处理网络图文视频版权归原作者所有，如有侵权请您告知@！

下期预告：导航栏制作

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

行高的精准把握!-前端CSS基础（css行高和高度有什么区别）

如何让文字在我们的盒子垂直居中呢？