Centering text in vertical progress bar (position absolute)

css position: absolute center horizontal and vertical
center div horizontally and vertically
vertical center css
css text vertical-align
html center text vertically
css center
center image in div vertically and horizontally
vertical center css flex

I'm trying to do something resembling health bar and I currently stuggle with centering the text within it. I exhausted my options, it was either off center when the text changed length or text goes outside the borders of bar.

Here's how it looks with my current CSS

http://prntscr.com/lr9l9c

.bar{
position: relative;
background: #1DA598;
height: 96px;
width: 16px;
border: 1px solid #333;
margin-top: 72px;
margin-left: 24px;
}

.barFiller{
    width: 100%;
    height: 90%;
    transition: width .2s ease-in;
}

.barText{
    position: absolute;
    bottom: 50%;
    top: 50%;
    width: 100%;
    transform: rotate(-90deg);
    color: "white"
}

barFiller and barText are children of bar

setting margins on auto and bot top left right on 0 didnt help either. Any other options? It should be centered and be flexible as progress bar can go from 2 to 6 digits.

You can combine rotate and translate for the css transform property like this

.bar {
  border : 1px solid black;
  width : 20px;
  height : 100px;
  position : relative;
}

@keyframes health {
  0% {
    height : 0;
  }
  100% {
    height : 100%;
  }
}

.barFiller {
  animation: health 3s linear infinite;
  width : 100%;
  background : red;
  position : absolute;
  bottom : 0;
}

.barText {
  position : absolute;
  left : 50%;
  top : 50%;
  transform : translate(-50%, -50%) rotate(-90deg);
  color: rgb(0, 255, 255); 
  mix-blend-mode: difference;
}
<div class="bar">
  <div class="barFiller"></div>
  <div class="barText">Logan</div>
</div>

How to Vertically Center Text with CSS, How do you center an image vertically and horizontally in HTML? Set the position for the parent to "relative", and for the child, set it to "absolute". Set the top, bottom, left, and rightproperties for the child. Set the margin to "auto" to make all margins equal and make the child <div> to be centered vertically as well as horizontally. Example of vertically aligning a text with the CSS position property:

Since you have the exact pixels of the bar you might as well just use the correct pixel values instead of percentages.

.bar {
  position: relative;
  background: #1da598;
  height: 96px;
  width: 16px;
  border: 1px solid #333;
  margin-top: 72px;
  margin-left: 24px;
}

.barFiller {
  width: 100%;
  height: 90%;
  transition: width 0.2s ease-in;
  background: red;
}

.barText {
  position: absolute;
  height: 15px;
  top: 40px;
  transform: rotate(-90deg);
  color: white;
}

https://codepen.io/rgarcianuskin/pen/MzMVdo

Bootstrap 4 Vertical Center - WDstack, Since you have the exact pixels of the bar you might as well just use the correct pixel values instead of percentages. How to make elements float to center?, Center Align Text. To just center the text inside an element, use text-align: center;. This text is centered. Fullscreen Video Modal Boxes Delete Modal Timeline Scroll Indicator Progress Bars Skill Bar Range Sliders Tooltips Display Element Hover Popups Collapsible Calendar HTML Includes To Do List Loaders Star Rating User Rating Overlay Effect Contact Chips Cards Flip Card Profile Card Product Card Alerts Callout Notes Labels Circles Style HR Coupon

try this:

.barText{
    position: absolute;
    line-height: 96px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    transform: rotate(-90deg);
    color: "white"
}

CSS Layout - Horizontal & Vertical Align, <style> .container { height: 200px; position: relative; border: 3px solid green; } .​vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform:  try this out i used the <center> </center> tag i am not sure about backward compatibility but i have tested in chrome and Mozilla Firefox and there are current.. sample code (doesn't need any CSS):

Centering text in vertical progress bar (position absolute), If you want to center something horizontally in CSS you can do it just by, using the text-align: center; (when working with inline elements) or margin: 0 auto; But when it comes to center something both horizontally and vertically the job can be a little tricky to achieve. Easy Custom Progress Bar in Angular. Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solution seems obvious once I’ve done it, but I still find myself googling the problem every few months.

How To Center an Element Vertically, One way to achieve vertical alignment of a single line of text is to make the line-​height match the desired height. .progress { height: 40px; font-size: 30px; } .bar  Absolute Centering works great as a simple drop-in solution with no-fuss. Anywhere you used Negative Margins before, use Absolute Centering instead. You won’t have to deal with pesky math for the margins or extra markup, and you can size your boxes responsively.

Absolute Centering in CSS - Frontend Weekly, Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width. The key point is that a percentage value on top is relative to the height of the containing block; While a percentage value on transforms is relative to the size of the box itself (the bounding box).

Comments
  • Why must you use position, isn't text-align enough?
  • prntscr.com/lr9qze sadly no
  • Sadly, it doesnt work, try for yourself, change value of 90 to say 90657 and it goes outside the bar.
  • I see, if you are going variable numbers then you would do better to use javascript. As percentages won't really help you here either. The problem is that the element itself has a width that will vary. You could try using a negative margin in addition to the percentage but that again would require you to have a width.
  • I thought that would be an easy and quick feature, I think it's overkill to give it a lot of coding, I might just display the values above and below the progress bar for now in that case.
  • Flexbox or Table display would probably work better for you in this situation now that I think about it.
  • flexbox failed me initially, I will tinker with table display in the morning