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

回答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

回答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>
  <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>

回答3:

Try this for your logo class:

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

}

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

回答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>
  <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>

回答6:

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>

回答7:

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>

See also this Fiddle!

回答8:

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