Center Div Vertically and Horizontally Without Defined Height

Center absolute div vertically with no defined height

You can place .child at top: 50%; and move it up with transform: translateY(-50%);, which will centre your element. This will put your element 50% from the top of the parent, and move it 50% up of the child element's height.

.parrent{
  position: relative;
}

.child {
  background: red;
  width: 50px;
  height: 50px;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

See working solution on this fiddle

Vertical align div to unknown height div without affecting horizontal centering

You should use display: flex and align-items; it's 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 to center an element horizontally and vertically

• Approach 1 - transform translateX/translateY:

Example Here / Full Screen Example

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

Centering elements vertically in a fixed-height container

Add display flex and align-self center: https://jsfiddle.net/w3s8cj92/1/

header {  height: 80px;  position: fixed;  top: 0;  transition: top 0.2s ease-in-out;  width: 100%;}
footer {  background: #ddd;}
* {  color: transparent}
nav {  height: 100%;  width: 100%;  background-color: bisque;  display: flex;}
nav ul {  list-style: none;  text-align: center;  margin: 0;  padding: 0;  top: 50%;  align-self: center;}
nav ul li {  display: inline-block;  float: left;}
nav ul li a {  display: block;  padding: 15px;  text-decoration: none;  color: #aaa;  font-weight: 800;  text-transform: uppercase;  margin: 0 10px;}

<header class="nav-down">  <nav class="headernav">    <ul>      <li><a href="#">Gig</a></li>      <li><a href="#">ity</a></li>      <li><a href="#">element</a></li>    </ul>  </nav></header>

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

---

Related Topics