Question

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

＆＃13;

"grunt glossary"

＆＃13;

header {
    width: 960px;
    height: 90px;
    margin: auto;
    background-color: #000;
}

.logo {
    float: left;
    width: 209px;
    height: 54px;
    background-color: #ced0d8;
}

＆＃13;

Answer 1

方法1 使用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>

方法2 ：使用.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>

Answer 2

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

Answer 3

垂直对齐元素的方法有很多种，但在这种情况下，<div>具有明确的高度并且位于父<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

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

方法1：使用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>

方法2：使用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>

Answer 7

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

由于您为.logo指定了高度和宽度，因此只要margin: auto处于绝对位置并且所有偏移都设置为零，您就可以使用.logo将其垂直和水平居中

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 8

只需使用标题的高度和填充：

＆＃13;

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

＆＃13;

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

＆＃13;

另见this Fiddle！

如何使用css垂直对齐div

8 个答案: