CSS how to vertically align text within a pseudo element

Question

I have created a pseudo element to sit over an unordered list, the css is as follows:

ul.pricing-column {
  width: 200px;
  height: 400px;
  background: red;
  position: relative;
  margin: 50px;
}

.pricing-column.featured::after {
  content: "Most Popular";
  background: #52BDE6 none repeat scroll 0% 0%;
  color: #FFF;
  width: 80px;
  border-radius: 100%;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1000;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9em;
  line-height: 0.9em;
  padding: 10px;
  display: inline-block;
  height: 80px;
  text-align: center;
}

<ul class="pricing-column featured">
</ul>

However, with this, the text inside the pseudo-element sits at the top of my element - is there a way to center it vertically?

Here is a fiddle

Answer 1

Easiest way? Add padding top. Little more difficult but better way, use flexbox.

These properties will do

display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align: center;

http://jsfiddle.net/6dqxt2r3/4/

Answer 2

If you want to center it verticaly use top: calc(50% - 40px); 40px is half of the element

Updated fiddle

EDIT:

Sorry, update use display: inline-flex; and align-items: center;

Fiddle

Answer 3

As long as you can change how you position the pseudo element then this will work.

Change position: absolute; to position: relative; and adjust the top and left values accordingly.

To center the text apply display: table-cell;, text-align: center; and vertical-align: middle.

.pricing-column.featured::after {
    content: "Most Popular";
    background: #52BDE6 none repeat scroll 0% 0%;
    color: #FFF;
    width: 80px;
    border-radius: 100%;
    position: relative;
    top: -35px;
    left: -90px;
    z-index: 1000;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.9em;
    line-height: 0.9em;
    padding: 10px;
    display: table-cell;
    height: 80px;
    text-align: center;
    vertical-align: middle;
}

http://jsfiddle.net/hungerstar/6dqxt2r3/5/