The first boxed text has been centered vertically on the height of its font's bounding box (line-height = bounding box height). The second boxed text has been centered vertically on its x-height. The third boxed text has been centered vertically on the extent between the height of its ascenders and the depth of its descenders.
Here is how your browser positions text in a box: