Place text on center of absolute positioned div

css position: absolute center horizontal and vertical
center''> <div vertically and horizontally responsive
position: absolute center css
text align center for position absolute
center position absolute div vertically
position: absolute; bottom center
center div horizontally and vertically
position: absolute center ie

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.

.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;
  }  
}
<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>

change height 180px to 60px for .featured-price class as shown below and remove clip-path

    .featured-price{
       height:60px;
      /* -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
       clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%); remove this clip-path*/
    }

Center content in a absolute positioned div, Horizontal and vertical position absolute middle. .center Just make the div relative to its absolute parent and use text-align: center , like this: Related FAQ. Here are some more FAQ related to this topic: How to align a DIV horizontally center using CSS; How to align text vertically center in a DIV element using CSS

Try This,

.review-star{
  color: #20BF55;
}
.featured-price{
    position: absolute;
    bottom: 20px;
    background: deeppink;
    color: white !important;
    padding: 10px;
  }
<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>

Absolute Horizontal And Vertical Centering In CSS, Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0​; } Absolute-Center.is-Right { left: auto; right: 20px; text-align: right; } . <div class="Center-Container is-Table"> <div class="Table-Cell"> <div  The thing is that position:absolute; modifies the element's width to fit its content, and that text-align: center; centers the text within the element block's width. So if you add a position: absolute; don't forget to increase the width of the element, or else the text-align: center; property will be useless.

Just remove below CSS and everything works as you expect.

-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%);
clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0% 100%); 
height: 180px;

Absolute Centering with CSS, If you want to centering something horizontally in CSS you have an easy job, just use the text-align: center; when work with inline elements. On the child element you set the position value to absolute and the left/top property  Its location is determined in relation to the most immediate parent element that has a position value of absolute, relative, or fixed. In the following example, the relative red square has a width

Horizontally centering an absolute element, #somelement { width: 200px; position: absolute; left: 50%; show how it looks without this extra centering, even with text-align: center applied. Absolute Position. This method will place an image on the web page in exact position relative to the top-left of the page or relative to another positioned div. The image is removed from the normal content flow of the web page. Absolute positioning can be confusing. In some circumstances, the positioning is relative to the entire document.

Center an Absolute Positioned Div – Beacon Blog, Need to center an absolute div on a page? This is a simple CSS snippet will auto center an absolute positioned div. position: absolute;. left: 0;. Thanks, your example works perfect, however .b missing position: absolute; which is important to get other things displayed property which I not included to keep code clearer. I know that makes no sense having table-cell absolutely positioned but maybe there is another approach that will allow to retain position: absolute; in both .a and .b

Positioning Elements on the Web, Choosing how to position an element in CSS is sometimes really a Floats work best for large containers, but may not work so well for text elements since it will be difficult to align. To center an element using absolute positioning, just follow these <div class="container"> <div class="item"></div> <div  There was another horizontal alignment issue on that page, be it not one that had to do with absolute positioning – when the page would get so small that the text inside the &lt;a&gt; navigation links becomes larger then the assigned space (extra tricky with a transform involved). The ‘overflow’ of text is then creating an offset, making it not centered.