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

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>