How to Vertically Center Content With Variable Height Within a 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 center with variable height

This is how I would solve your issue personally...

The following code shows how you could vertically align your elements via the use of ghost elements...

Potential Solution:

.outer { 
        height: auto; 
        text-align: center; 
        background: #444;
    }

    .outer:before { 
        content: ''; 
        display: inline-block; 
        height: 100%; 
        vertical-align: middle;
    }

    span {
        font-size: 50px;
        vertical-align: middle;
        color: #FFF;
    }

    .inner {  
        padding: 10px;
        width: 40rem; 
        display: inline-block; 
        vertical-align: middle;
        font-size: 20px;
        color: #FFF;
        text-transform: uppercase;
    }

<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin…</div>
</div>
<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… </div>
</div>
<div class="outer">
    <span>+</span>
    <div class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… Lorem ipsum dolor sit amet, consectetuer adipiscin… </div>
</div>

how to vertically center a div of variable height in a fixed height div

To vertically center elements in a fixed-height parent element set their vertical-align: middle. Add an additional element displayed as an inline-block with a zero width and full height.

Sample HTML:

<div class="container">
    <div class="height"></div>
    <img ...>
    <img ...>
</div>

Sample CSS:

.container {
    height: 300px;
}
.height {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}
.container > img {
    vertical-align: middle;
}

Demo at JS Bin

If you know the height of the container you can also set it's line-height to the same value instead of using the div.height.

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)

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 in a parent of variable height

The primary issue here is that you need the left and right divs to have the same height automagically. Other than javascript, only flexbox and css tables allow for that. So...

Flexbox can do that.

.wrapper {  width: 20em;  margin: 1em;  border: 1px solid #999;  overflow: hidden;  display: flex;}.left {  flex: 0 0 70%;}.right {  flex: 1;  display: flex;  justify-content: center;  align-items: center;}.button {  width: 3em;  border: 1px solid #999;  text-align: center;}

<div class="wrapper">  <div class="left">Every person is worth just as much as the things they busy themselves with.</div>  <div class="right">    <div class="button">button</div>  </div></div>

Vertically align a div in a parent which has height auto AND min-height set?

Here is one approach using the CSS3 transform property.

Use absolute positioning to place the top edge of the child element at 50% from the top, and then use the transform: translateY(-50%) to adjust for the child's height.

.parent {    height: auto;    min-height: 200px;    border: 1px dotted gray;    position: relative;}.child {    border: 1px dotted blue;    position: absolute;    top: 50%;    left: 0;    transform: translateY(-50%);}.content {    margin-left: 100px;    margin-right: 400px;}

<div class="parent">    <div class="child">child</div>    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.    </div></div>

How to Vertically Center Content With Variable Height Within a Div