如何使用CSS垂直对齐div

Question

我知道这已经被问过很多次了，但是我根本无法按照其他主题的说明进行操作。 似乎对我没有任何帮助。 请检查屏幕截图，以更好地了解我要完成的工作。 另外，我将代码添加到了这篇文章中。 谢谢！

 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> 

Answer 1

方法1：使用position:relative; 和top:50并transform: translateY(-50%)您可以将其居中，如果您不知道元素的高度，那么效果很好，如下所示：

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

JS小提琴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> 

---

方法2 ：如果您知道元素的高度，则使用.calc() CSS函数，如下所示：

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

JS小提琴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> 

---

方法3：如果您都知道两个元素的高度，则可以从父div高度的一半中手动减去.logo的高度，因此90/2-54/2 = 18，如下所示：

支持 ：所有浏览器caniuse.com 。

JS小提琴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> 

Answer 2

值得注意的是，您也可以使用flexbox轻松完成此flexbox ，如下所示：

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

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

浏览器支持相当不错

Answer 3

有很多方法可以垂直对齐元素，但是在这种情况下， <div>具有明确的高度并位于父<header>内部，父<header>也具有明确的高度，这是最简单的方法之一-所有浏览器都支持在过去的十五年中-是：

• 应用相等的margin-top和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> 

如何计算margin-top和margin-bottom分别为18px ？

（的高度<header> ） - （高度.logo ）= 36px

36px / 2 = 18px

Answer 4

为您的徽标课程尝试以下操作：

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

}

Answer 5

您听说过flexbox吗？ 这很棒！ 尝试这个 ：

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

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

Answer 6

有3种方法可以解决此问题。

方法1：使用transform属性。 （ 支持IE9 + ）

 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> 

方法2：使用flex属性。 （ 支持IE10 + ）

 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> 

方法3：使用margin属性。 （ 支持IE3 + ）

 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> 

Answer 7

使用绝对定位有一个巧妙的技巧，如下所示。

由于您为.logo指定了高度和宽度， .logo您可以使用margin: auto使其在垂直和水平方向上.logo ，前提是.logo绝对定位并且所有偏移都设置为零。

这依赖于CSS2规范，并且可以在许多浏览器中使用。

 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> 

Answer 8

只是玩弄标题的高度和填充：

 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> 

另请参阅此小提琴 ！