In the below html snippet I've tried to place text in center of absolute positioned `div` with class `featured-price`. But the text inside `span` with class `centerd` is not visible within the div. I'm using \*\*materialize css \*\* framework for development.

```css
.review-star{
  color: #20BF55;
}
.featured-price{
  display: table;
  bottom: 15px;
  left: 0;
  padding: 3px 10px 2px 10px;
  font-size: 16px;
  height: 180px;
  position: absolute;
  background-color: #FF5964;
  -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
  clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
  .centerd{
    color:white;
  }  
}
```

```html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
    <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
    <div class="col s12 m4 l4">
    <div class="card">
      <div class="card-image">
        <img src="https://source.unsplash.com/400x300/?shoes">
        <div class="featured-price blue-text  text-darken-2 center-align">
          <span class="centerd">Text</span>

        </div>
      </div>
      <div class="card-content">
        <span class="card-title uk-margin-remove-vertical" id="package-title">Item Title</span>
        <span>Brand,</span>
        <span>Category</span>
        <br>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
        <i class="material-icons review-star">star</i>
      </div>
    </div>
  </div>
</div>
```

I would be very thankful if anyone could printout the mistakes that I've been making above.