html - 垂直对齐行内 block 元素

Question

因此，尝试学习 css 的基础知识，但仍在努力学习本应相当简单的东西。垂直居中显示 inline-block 的 div。我试过 vertical align: middle;。

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#container {
  height: 100%;
  width: 100vw;
  min-height: 580px;
  text-align: center;
  background-color: white;
  vertical-align: middle;
}

#logo {
  display: inline-block;
  height: 50vh;
  width: 50vh;
  background-color: red;
}

<div id="container">

  <div id="logo"></div>

</div>

Answer 1

参见示例 fiddle

添加 CSS

#logo {
  position: absolute;
  left:50%;
  top:50%;
  margin:-25vh 0vh 0vh -25vh;
}