Center a 'Div' Vertically in a % Height '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

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;
}

Vertical align div to unknown height div without affecting horizontal centering

You should use display: flex and align-items, its also important to pass a min-height to your container.

I have created a quick fiddle to explain what I understood from you.

Take a look at this (JSFiddle):

.container {  width: 300px;  padding-bottom: 20px;  padding-top: 20px;  border: solid 1px red;  display: flex;  align-items: center;  justify-content: center;  min-height: 30px;}
.inner {  background: rgba(0, 0, 0, 0.5);  width: 50%;}
.fixed {  position: fixed;  left: 20px;  border: solid 1px blue;  height: 30px;}

<div class="container">  <div class="inner">    Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum  </div>  <div class="fixed">    fixed  </div></div>

How to set div in center vertically and horizontally where height is not known?

it is not possible to vertically center a block with this technique, only horizontal centering is allowed
try this css code to get a vertical and horizontal centering:

login-form {
 width: 35%;
 margin: auto;
 margin-top: 50vh; /*allow us to push the login-form into the half of the viewport */
 transform: translateY(-50%);

/the login-form will shoot the half of his own height/
}

hope this will work for you
good luck

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 div in a div with height auto

I have created a prototype... But I had to modify your HTML and CSS so it might not be the best solution: http://jsfiddle.net/TmCwB/

HTML

<div id="outerDiv">
    <div id="parent">
         <div id="child"></div>
    </div>
</div>

CSS

#outerDiv {
    margin: 0 auto;
    width: 200px;
}
#parent{   
    background-color: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 200px;
    height: 500px;
}
#child{
    width: 100%;
    height: 52px;
    display: inline-block;
    background-color: blue;
}

Hope this helps...

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>