原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>为什么加号没有水平居中</title>
</head>
<body>
<style>
div{
position: absolute;
top:50%;
left:50%;
width:50px;
height:50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 329px;
}
</style>
<div>+</div>
</body>
</html>
解析
没做特别的设定，行内框自然从行框的左边开始
我推测：由于css最先来自于排版。所以默认字都是从左往右写的，没做特殊设定的时候，字体这个行内框的左侧有边界问题，就是不能超过临近行框的左侧。字体小的时候，行内框的元素居中，是因为也没有碰到行框的左边。但是当字体不断扩大的时候，直到碰壁（姑且叫做“左侧碰壁假说”，没找到相关资料）。由于前面所讲的前提，碰壁之后没有办法，虽然text-align做了居中，但是左侧碰壁假说的作用力会更强，因而导致文字被迫向右移。
当然cyl提到左侧碰壁并非不可破解的。利用负边距可以使行框内的行内框打破这个规矩。
需要深入了解的
- 行内框
- 行框
