How to Vertically Center Text in a Dynamically Height Div

How can I vertically center text in a dynamically height div?

The best solution I've ever encountered is to make use of the display property and set the wrapper element as a table to allow the usage of vertical-align:middle on the element to be centered:

See this working Fiddle Example!

HTML

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

CSS

body {width: 100%; height: 100%;}   /* this is just to "view" the div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

TESTED ON

Windows XP Profissional versão 2002 Service Pack 3

Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m

Windows 7 Home Edition Service Pack 1

Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

Firefox 12.0
Chromium 18.0.1025.151 (Developer Build 130497 Linux)

Vertical align text inside dynamic height div

The usual approach is to use display:table stuff. But if you don't want to use it, you can try something like this:

<div class="post-details-wrapper">
    <div class="post-details-h">
        <span>Post Details</span>
    </div>
</div>

.post-details-wrapper {
    height:350px;
    background:red;
}
.post-details-h {
    background-color: green;
    height:10%;
    width:100%;
}
.post-details-h:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
}
.post-details-h span {
    display: inline-block;
    vertical-align: middle;
}

Just add span so you can center taht element inside .post-details-h.

You can check in JSFiddle

Hope this helps.

Vertically centered text in a dynamic height wrapper

Flexbox can do that...

.wrap {  height: auto;  position: relative;  width: 50%;}
.wrap a img {  height: auto;  width: 100%;}
.wrap a span.text {  height: 100%;  left: 0;  position: absolute;  text-align: center;  top: 0;  width: 100%;  display: flex;  justify-content: center;  align-items: center;}
.wrap a span.text span {  color: #fff;  font-size: 20px;  font-weight: bold;  line-height: 1.25}

<div class="wrap">  <a href="#">    <img src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/sample-1.jpg" />    <span class="text"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id praesentium nihil iure amet dolore nulla totam modi </span></span>  </a></div>

CSS dynamic vertical align text in div that has fixed height

Since you have defined height on your element the easiest way is to just set line-height with same number of px

.mydiv {  border-radius: 25px;  color:#c4c6c7;  font-size:20px;  text-align:center;  background-color:white;  height: 50px;  width:40%;  display: inline-block;  border-style:solid;  border-color:#c4c6c7;  margin: 0 auto;  overflow: hidden;  line-height: 50px;}

<div class="mydiv" id="c1" onclick="checkans(this.innerHTML)">choice 1</div>

Why this trick centers text vertically in dynamic height div (and why it breaks)?

My question is - how does this trick work? How is span helping center the text?

Since you give the span inline-block property, the span then inherits it's parent height (with height: 100%) - which in you example is a fixed 300px. And since you gave also the same property to the paragraph, those two elements are one next to each other. See an example:

#parent {  height: 300px;}span {  height: 100%;  display: inline-block;
  /* some width and background-color for demonstration */  width: 5px;  background-color: red;}p {  margin: 0;  display: inline-block;}

<div id="parent">  <span></span>  <p>foobar</p></div>

How to vertically center content with variable height within a div?

Just add

position: relative;
top: 50%;
transform: translateY(-50%);

to the inner div.

What it does is moving the inner div's top border to the half height of the outer div (top: 50%;) and then the inner div up by half its height (transform: translateY(-50%)). This will work with position: absolute or relative.

Keep in mind that transform and translate have vendor prefixes which are not included for simplicity.

Codepen: http://codepen.io/anon/pen/ZYprdb

Centering an image vertically in a div with a dynamic height

You can give the parents divs relative positioning and the images absolute positioning:

img {    width:25px;    position:absolute;    margin:auto;    top:0;    bottom:0;}.container-fluid > div {    text-align:center;    height: calc(100vh/5);    position:relative;}.container-fluid > div:nth-child(odd) {    background:yellow;}

<div class="container-fluid">    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div>    <div>        <img src="http://lorempixel.com/output/food-h-g-164-166-5.jpg">    </div></div>

Changing div's order with CSS with dynamic height, text vertical align middle

Drop the height: 100% on the div rule

You can drop the vertical-align:middle; too since it has no effect in this case, and if you want to vertical center the text, I added a new rule

.txtBox {
  display:flex;
  justify-content: center;
  align-items: center;
}

ul{  display:block;  margin:0;  padding:0;}li{  display:flex;  width:100%;  height:auto;}div{  display:block;  width:50%;  text-align:center;  background:#fcc;}.txtBox {  display:flex;  justify-content: center;     /*  horizontal - when flex row */  align-items: center;         /*  vertical   - when flex row */}li:nth-child(even) .imgBox{  order:2;}img{  width:100%;  height:auto;  display:block;}@media screen and (max-width: 68px) {  li{    display:block;  }  div{    width:100%   }  .txtBox{    padding:20px;    width:calc(100% - 40px);  }}

<ul>  <li>    <div class="imgBox">      <img src='https://images.pexels.com/photos/27714/pexels-photo-27714.jpg?h=350&auto=compress'>    </div>    <div class="txtBox">      FLOWER 1    </div>  </li>  <li>    <div class="imgBox">      <img src='https://images.pexels.com/photos/132419/pexels-photo-132419.jpeg?h=350&auto=compress'>    </div>    <div class="txtBox">      FLOWER 2    </div>  </li>  <li>    <div class="imgBox">      <img src='https://images.pexels.com/photos/103573/pexels-photo-103573.jpeg?h=350&auto=compress'>    </div>    <div class="txtBox">      FLOWER 3    </div>  </li>  <li>    <div class="imgBox">      <img src='https://images.pexels.com/photos/132474/pexels-photo-132474.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'>    </div>    <div class="txtBox">      FLOWER 4    </div>  </li></ul>

How do I center text over a div that dynamically changes width within another div?

Place it in a separate span (or div, p, whatever):

const progressBar = props => {
  return (
    <div className={ classes.ProgressBar }>
      <div style={{ width: props.passed }}></div>
      <span className="label">{props.passed}</span>
    </div>
  );
};

Use position: relative on the outer container:

.ProgressBar {
  position: relative; /* <<< */
  width: 125px;
  max-width: 125px;
  background: rgb(255, 97, 97);
  border-radius: 4px;
  height: 40px;
  box-shadow: 0 2px 3px rgb(110, 109, 109);
  overflow: hidden;
  transition: 0.2s ease-in-out;
}

Then style the span, for example:

.ProgressBar .label {
  position: absolute; /* <<< reason for relative positioning */
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px; /* <<< adjust to your needs */
  text-align: center;
}