Vertically Center a Div with Variable Height Within a Div That Is 100% of The Viewport

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 a div vertically inside another div with 100% height

If using CSS Flexbox is an option, you could simply achieve that by displaying the container as flex box and align the inner div at the middle (horizontally and vertically) as follows:

EXAMPLE HERE

#intro {
    height: 100%; /* Or 100vh */

    display: flex;
    align-items: center;     /* Align the inner div vertically */
    justify-content: center; /* Align the inner div horizontally */
}

In this example, align-items and justify-content would make the inner div display at the middle of the #intro, vertically and horizontally.

By adding vendor prefixes, it should work on IE 10 as well. (I used Autoprefixer in the demo).

However in order to support old web browsers give this approach a try (take a look at Vertical Alignment section):

Vertically align an image inside a div with responsive height

100% viewport vertical center with content following

The use of flexbox is your best bet as it is very concise and has good browser support. Also, it's your best bet for future-thinking as it is forming the foundation of today's modern app layout infrastructure.

The <p> being not pushed down is just done by giving a 0 height so that its effects on its container is not realized.

HTML:

<div class="container">
    <h1>
        HI
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque tortor, auctor ut consectetur non, posuere a justo. Morbi nisi eros, pellentesque eget ullamcorper eu, tristique at tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent ornare odio lorem, vel fermentum est lacinia ut. Vivamus tincidunt augue scelerisque justo consectetur tincidunt. Phasellus lectus nibh, ultrices in dictum vel, pretium at nisl. Sed vehicula tortor sed facilisis accumsan. Sed cursus felis quis quam efficitur, id luctus mi aliquet. Morbi mattis gravida convallis. Sed non feugiat dolor, in gravida arcu. Morbi id dolor imperdiet, rhoncus ante convallis, varius lacus.
    </p>
</div>

CSS:

.container {
    align-items: center;
    background: red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.container p {
    height: 0;
}

Fiddle: https://jsfiddle.net/3ms3sggd/

A Great Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How to vertically center a div on the available screen height?

The content wrapper must fill all the remained screen. so:

.App{
    display: flex;
    flex-direction: column;
    height: 100vh;
 }

.content-wrapper
{
    flex: 1;
    justify-content: center;
    align-items: center;
}

vertically center element when height is smaller than container, but make height 100% when container height is smaller

Without knowing what you're trying to accomplish with the caption, this is the closest I've gotten. Update info on the caption and I'll see what more I can do.

*{  box-sizing:border-box;  margin:0;  padding:0;}.timeline-item{  width: 100%;  position:relative;}.timeline-leftbox{  width:50%;  text-align:right;  padding:0 8px;}
.timeline-rightbox{  position:absolute;  height:100%;  width:50%;  top:0;  right:0;  overflow:hidden;  white-space:nowrap;}.timeline-rightbox::after{  content:"";  display:inline-block;  height:100%;  width:0;  vertical-align:middle;}.timeline-rightbox img{  max-height:100%;  max-width:100%;  width:auto;  height:auto;  vertical-align:middle;}

<div class="timeline-item">  <div class="timeline-leftbox">    <div>      <h3 class="timeline-title">Blah blah blah</h3>      <p>        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a ornare sem. In sodales ac nisl facilisis pharetra. Nam non pellentesque mauris. Proin scelerisque, sapien non scelerisque auctor, nunc erat condimentum est, viverra dapibus dui odio a neque. Mauris est dui, posuere at urna in, gravida tincidunt odio. Integer quis egestas est. Praesent tincidunt justo nec nibh malesuada ullamcorper. Nulla convallis et quam vitae posuere.      </p>    </div>  </div>  <div class="timeline-rightbox">    <img src="http://via.placeholder.com/550x900" />  </div></div>

Make a div center of viewport - Horizontally and vertically

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-250px;
 margin-top:-250px;
}

Demo: http://jsfiddle.net/fJtNQ/

Why is this working?

Well, basically you have an absolute positioned element inside the dom. It means that you can position it wherever you want and if you don't have a relative positioned element as parent, left and top will be the distance from the document's left/top origin.

Assigning left:50% and top:50% enables this element to be positioned always in the center of the screen, but in the center you will find the top left corner of the element.

If you have fixed width/height, you can easily 'translate' the point in the center to be actually the center of the wrapper div by giving negative margin-left and margin-top (therefore with the help of some extremely easy basic math their values will be -(width/2) and -(height/2))

EDIT

You can also easily center by using flexbox, plus (a big one) you don't need to specify w/h, i.e.:

body { /* can also be whatever container */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#wrapper {
  /* whatever style u want */
}

demo: https://jsfiddle.net/00utf52o/

How can I vertically center a div element for all browsers using CSS?

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

Vertically center a content area until it reaches a certain height?

My solution takes into account that you want your content to be centered on the whole page and not just "in the space below". I used negative margins to achieve this.

See the working example here:

http://jsfiddle.net/WkQzw/5/

HTML:

<div id="container">
    <div id="table">
        <div id="cell">
            <div id="content">Some content</div>
        </div>
    </div>
</div>

CSS:

#container {
    width: 100%;
    height: 100%;
    padding: 100px 0;
    margin-top: -100px;
}
#table {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}
#content {
    background-color: lightblue;
    width: 50%;
    margin: 0 auto;
}

Tested:

IE 9 Win7 --> WORKS
Chrome 30 Mac --> WORKS
Safari 7 Mac --> WORKS
Firefox 25 Mac --> WORKS

Update:

I used box-sizing: border-box; but Firefox required an additional -moz-box-sizing: border-box;. Now it works also in Firefox.