Vertically Center HTML Element Within a Div of Dynamic Height

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>

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

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>

vertically align div inside another div with a dynamic height

Example: http://jsfiddle.net/kevalbhatt18/78Lzadtt/2/

I solved your Problem by putting resumeStyleNameTitlePhotograph clss in to resumeStyleNameTitleInner

<div class="resumeStyleNameTitleWrapper">
    <div class="resumeStyleNameTitle">
        <div class="resumeStyleNameTitleInner">
            <div class="resumeStyleNameTitleFontChange">Users Name</div>
        </div>
<div class="resumeStyleNameTitlePhotograph">
        <div class="resumeStyleNameTitlePhotographInner">
            <img id="id_name_details_photograph" class="name_details_photograph_preview_dimensions" src="">
        </div>
    </div>
    </div>
</div>

So now if your image size change then your text div will also change its height depending upon image div size

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.

how to align vertically a dynamic-height div inside another fixed height div

One solution is to transform its Y-axis to -50% and then apply margin-top: 50% to the .vertical-content.

Fiddle

.vertical-wrapper {  width: 220px;  min-height: 220px;  background: #cf0000;  overflow: auto;}.vertical-content {  background: #fff;  margin: 10px;  padding: 5px;  margin-top: 50%;  transform: translateY(-50%);}

<div class="vertical-wrapper">  <div class="vertical-content">Variable length of text which can be multiple lines. Variable length of text which can be multiple lines.    <br />Good luck!</div></div>

Vertically center inline-block div inside dynamic height div

I suggest to use flexbox + align-items for centering + order for controlling the position, width your existing markup, see the support details, and relevant prefixes.

jsfiddle

.like-container {
    display: flex;
    align-items: center;
}
.like-div {
    font-size: 10px;
    margin-right: 100px;
    order: 1;
}
.title {
    font-size: 40px;
    flex: 1;
}

If you need to support IE9, you can use this CSS table layout, but you'll need to adjust the markup, place <div class="title"> before <div class="like-div">.

jsfiddle

.like-container {
    display: table;
    width: 100%;
}
.title, .like-div {
    display: table-cell;
    vertical-align: middle;
}
.title {
    font-size: 40px;
    width: 100%;
}
.like-div {
    font-size: 10px;
    padding-right: 100px;
}

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)

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>