如何使用css垂直对齐div答案

【问题标题】：How to vertically align a div using css如何使用css垂直对齐div
【发布时间】：2018-05-13 20:47:24
【问题描述】：

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

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>

【问题讨论】：

stackoverflow.com/a/31977476/3597276

标签： html css css-selectors

【解决方案1】：

值得注意的是，您也可以使用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;
}

浏览器支持pretty good

【讨论】：

【解决方案2】：

方法一 使用position:relative; 和top:50 和transform: translateY(-50%) 可以让它居中，如果你不知道元素的高度，这很好，像这样：

支持 : IE9+ 和所有其他浏览器，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>

方法二：使用.calc()css函数，如果你知道元素的高度，像这样：

支持 : IE9+ 和所有其他浏览器，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>

方法3：如果你知道两个元素的高度，你可以手动从父div的一半高度减去.logo的一半高度，所以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>

【讨论】：

非常感谢，所有浏览器都会支持这个？
用浏览器支持更新了我的答案

【解决方案3】：

为你的标志类试试这个：

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

}

【讨论】：

【解决方案4】：

你听说过弹性盒子吗？这很棒！试试这个：

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

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

【讨论】：

【解决方案5】：

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

方法一：使用transform属性。 (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>

方法二：使用flex属性。 (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>

方法3：使用margin属性。 (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】：

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

由于您为.logo 指定了高度和宽度，因此您可以使用margin: auto 将其垂直和水平居中，前提是.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>

【讨论】：

【解决方案7】：

只需调整标题的高度和填充：

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>

另见this Fiddle！

【讨论】：

【解决方案8】：

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

应用相等的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

【讨论】：