如何使用css垂直对齐div [英] How to vertically align a div using css

问题描述

我知道这已经被问过很多次，但我根本不能按照这些其他主题的说明。没有什么似乎是为我工作。请检查屏幕截图，以便更好地了解我要完成的工作。此外，我添加了我的代码到这个帖子。感谢！

  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>  

解决方案

/ strong>
使用 position：relative; 和 top：50 和 ：translateY（-50％）你可以得到它居中，如果你不知道元素的高度，这是很好，像这样：

支持：IE9 +和所有其他浏览器， caniuse.com

JS Fiddle 1

< pre class =snippet-code-css lang-css prettyprint-override> 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>  

---

方法2 ：使用 .calc（） css函数，if你知道元素的高度，像这样：

支持：IE9 +和所有其他浏览器， caniuse.com

JS Fiddle 2

  960px; height：90px; margin：auto; background-color：＃000;}。logo {position：relative; width：209px; height：54px; top：calc（50％ -  27px）; / * 50％父高度 -  27px是54px的高度的一半.logo * / left：0; background-color：＃ced0d8;}  

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

---

方法3：如果您知道两个元素的高度，您可以手动减去 .logo 从父div的一半高度，所以90/2 - 54/2 = 18，像这样：

支持：所有浏览器， 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>  

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>

解决方案

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>

这篇关于如何使用css垂直对齐div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！