How to vertically center text in a <span>?

How can I vertically center text that is wrapped in a <span>? The <span> must have min-height of 45px. Here is what I am envisioning:

--------                  -------
text

                --->      text   


--------                  -------

I tried vertical-align as well as methods from this article. None of them worked

Try using flexbox, all modern browsers support it, with prefixes it also works in IE10.

span {
  min-height: 100px;
  display: inline-flex;
  align-items: center;
  border: 1px solid aqua;
}

<span>vertical center</span>

While you are using span, you could simply change the display method to table-cell. Remember, if you are going to use div instead of span, you might need to use another way.

span {
  height: 45px;
  border: 1px solid #444;
  display: table-cell;
  vertical-align: middle;
}

<span>text</span>

The "old" way to do this, if you need true support for old browsers (that is IE6 & IE7), is to use line-height. This method only allows 1 line of text.

span {
    display: inline-block;
    line-height: 100px;
    border: 1px solid red;
}

<span>vertical center</span>

You can achieve vertical center text alignment by any of the below approaches based upon which browser your application is going to support.

<span class="vertical-center">Center Text</span>

1. using display: inline-flex; (if you are targeting mordern browsers like Chrome, safari, IE11 and above you can go with flex) Check: Can I use https://caniuse.com/#search=inline-flex

   .vertical-center { display: inline-flex; border: 1px solid #ddd; min-height: 100px; align-items: center; }

2. Using display: table-cell; (if you are targeting older browsers too like IE9, go with second approach )

   .vertical-center-table-cell { display: table-cell; border: 1px solid #ddd; height: 100px; vertical-align: middle; } Demo: JSFiddle

If you need to align your text inside the span element both horizontally and vertically you can also try the inline-grid display.

span.verticallycentered{
	display: inline-grid;
    align-items: center;
	text-align: center;
    font-size:20px;
	min-width:300px;
	max-width:300px;
	min-height:150px;
	margin: 4px;
	padding-left: 8px;
	padding-right: 8px;
	border: 1px solid black;
	background-color: silver;
}

<span class='verticallycentered'>vertically and horizontally centered text spanning over more than just one line</span>

span{
height: 45px;
display: grid;
align-items: center;
}

span is set to display inline and the example you linked to should work with divs that are set to display block. Trying adding display block to your span and then following the advice in the link. Combining them should get it to work. But then, why use a span?