为什么此按钮的文本居中？

Question

为什么基本<button>元素的文本内容垂直居中？在检查器中查看了按钮的样式之后，我无法确定是哪个CSS属性负责此操作。

button {
  width: 200px;
  height: 100px;
  text-align: left;
}

<button>lorem ipsum</button>

Answer 1

我对此行为进行了很多思考，但找不到正确的答案，只是一个把戏

    button {
      width: 200px;
      height: 100px;
      text-align: left;
      position:relative;
    }
    
    button span {
      position:absolute;
      bottom:0;
      width:100%;
      text-align:center;
    }

<button ><span>Example</span></button>

Answer 2

浏览器经过硬编码，使按钮内容垂直居中，并且您无法在大多数浏览器（例如Chrome）中修改此内容。有关更多信息，请参见以下答案：https://stackoverflow.com/a/34612505/5623003