How to vertically align a div using css

Question

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 get a better understanding of what I'm trying to accomplish. Also, I added my code to this post. Thanks!

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

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

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

http://stackoverflow.com/a/31977476/3597276 – Michael Benjamin Jan 21 '16 at 00:58 — Michael Benjamin, Jan 21 '16 at 00:58

Mi-Creativity · Answer 1 · 2016-01-21T00:11:31.823

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>
  <div class="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>
  <div class="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>
  <div class="logo"></div>
</header>

Thanks so much and all browsers will support this ? – Richard Rodgers Jan 20 '16 at 23:55 — Richard Rodgers, Jan 20 '16 at 23:55
Updated my answer with browser support – Mi-Creativity Jan 21 '16 at 00:07 — Mi-Creativity, Jan 21 '16 at 00:07

score 2 · Answer 2 · answered Jan 21 '16 at 00:04

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

Rounin · Answer 3 · 2016-01-21T01:41:27.343

There are many ways to vertically align an element, but in this case, where your <div> has an explicit height and sits inside a parent <header> which also has an explicit height, one of the simplest ways - supported by all browsers for the last decade and a half - is:

Apply an equal margin-top and margin-bottom.

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

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

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

How to work out that the margin-top and margin-bottom should each be 18px?

(height of <header>) - (height of .logo) = 36px

36px / 2 = 18px

score 0 · Answer 4 · answered Jan 20 '16 at 23:58

0

Try this for your logo class:

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

}

answered Jan 20 '16 at 23:58

haakon.io

477
6
19

score 0 · Answer 5 · answered Jan 21 '16 at 00:02

0

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

answered Jan 21 '16 at 00:02

JoeMecPak

618
2
14
28

score 0 · Answer 6 · answered Jan 21 '16 at 00:19

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>
  <div class="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>
  <div class="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>
  <div class="logo"></div>
</header>

score 0 · Answer 7 · answered Jan 21 '16 at 00:30

There is a neat trick using absolute positioning as shown below.

Since you specified a height and width for .logo, you can use margin: auto to center it both vertically and horizontally provided that .logo is absolutely positioned and all the offsets are set to zero.

This relies on CSS2 specifications and will work in quite a few browsers.

header {
  width: 460px; /* narrow width for demo... */
  height: 90px;
  margin: auto;
  background-color: #000;
  position: relative;
}
.logo {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  width: 209px;
  height: 54px;
  background-color: #ced0d8;
}

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

score 0 · Answer 8 · answered Jan 21 '16 at 00:46

Just play around with the height and the padding of your header :

body {
    margin : 0;
}

header {
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 26px;
    background-color: #000;
}

.logo {
    display: block;
    width: 209px;
    height: 54px;
    margin : auto;
    background-color: #ced0d8;
    border : 1px solid #000;
}

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

How to vertically align a div using css

8 Answers8

Linked