How To Vertically Align A Div Using Css

I know this has been asked many times before but I simply can't follow the instructions on these other topics. Nothing seems to be working for me. Please check the screenshot to ge

Solution 1:

it's worth noting that you could also accomplish this easily with flexbox, like so:

header {
  width: 960px;
  height: 90px;
  background-color: #000;
  display:flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 209px;
  height: 54px;
  background-color: #ced0d8;
}

browser support is pretty good

Solution 2:

Method 1 Using position:relative; and top:50 and transform: translateY(-50%) you can get it centered, this is so good if you don't know the height of the element, like this:

Support : IE9+ and all other browsers, caniuse.com.

JS Fiddle 1

header {
  width: 960px;
  height: 90px;
  margin: auto;
  background-color: #000;
}

.logo {
  position:relative;
  width: 209px;
  height: 54px;
  top:50%;
  left:0;
  transform: translateY(-50%);
  background-color: #ced0d8;
}

<header><divclass="logo"></div></header>

---

Method 2: using .calc() css function ,if you know the height of the element, like this:

Support : IE9+ and all other browsers, caniuse.com

JS Fiddle 2

header {
  width: 960px;
  height: 90px;
  margin: auto;
  background-color: #000;
}

.logo {
  position:relative;
  width: 209px;
  height: 54px;
  top:calc(50% - 27px); /* 50% parent height - 27px is half of 54px the height of .logo */left:0;
  background-color: #ced0d8;
}

<header><divclass="logo"></div></header>

---

Method 3: if you know both elements height, you can manually subtract half the height of the .logo from half of the height of the parent div, so 90/2 - 54/2 = 18, like this:

Support: All browsers, caniuse.com.

JS Fiddle 3

header {
  width: 960px;
  height: 90px;
  margin: auto;
  background-color: #000;
}

.logo {
  position:relative;
  width: 209px;
  height: 54px;
  top:18px; /* 90/2 - 54/2 = 18  */left:0;
  background-color: #ced0d8;
}

<header><divclass="logo"></div></header>

Solution 3:

Try this for your logo class:

.logo {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
    width: 209px;
    height: 54px;
    background-color: #ced0d8;

}

Solution 4:

Have you heard of flexbox? It's great! Try this :

header {
  width: 960px;
  height: 90px;
  margin: auto;
  background-color: #000;
  display: flex;
}

.logo {
  width: 209px;
  height: 54px;
  background-color: #ced0d8;
  margin: auto 0;
}

Solution 5:

There is a 3 ways to solve this problem.

Method 1: Use transform property. ( IE9+ supported )

header {
    width: 960px;
    height: 90px;
    margin: auto;
    background-color: #000;
}

.logo {
    float: left;
    width: 209px;
    height: 54px;
    background-color: #ced0d8;
    top:50%;
    transform:translateY(-50%);
    position:relative;
}

<header><divclass="logo"></div></header>

Method 2: Use flex property. ( IE10+ supported )

header {
    width: 960px;
    height: 90px;
    margin: auto;
    background-color: #000;
    display:flex;
    align-items: center;
}

.logo {
    float: left;
    width: 209px;
    height: 54px;
    background-color: #ced0d8;
}

<header><divclass="logo"></div></header>

Method 3: Use margin property. ( IE3+ supported )

header {
    width: 960px;
    height: 90px;
    margin: auto;
    background-color: #000;
}

.logo {
    float: left;
    width: 209px;
    height: 54px;
    background-color: #ced0d8;
    margin-top: 18px;
    /* (90px (header height) - 54px (logo height))/2 = 18px; */
}

<header><divclass="logo"></div></header>