Why does text-align center headers?

Question

Why does text-align: center headers? Headers are block elements h1,h2,etc. Why is it that text-align centers headers even though the documentation specifically says it does not: Docs on text-align

This property describes how inline-level content of a block container is aligned.

I'm a little confused as to why it wont center a block element like a div, but willing to center a header. Could it potentially be because text inside a header is inline, but the actual header itself is a block element?

http://codepen.io/stephenhuh/pen/KrkLZG - codepen on this phenomenon.

* {
    text-align: center;
}

.box {
    background-color: blue; 
    width: 150px;
    height: 150px;
}

Answer 1

From CSS 2:

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

Answer 2

Like everyone else has already explained, it is centering the text content inside the header element. I'd just like to add that you can easily test this by adding a border or background to elements. If you do this, you'll notice that the header will span the entire width of its container by being a block element, and the text will only be centered inside that block.

(Alternatively, you could use an inspector to show the actual space an element is occupying)