如何使用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> 

另請參閱此小提琴 ！