Question

我在另一个div中有一个div（id =＆＃39; canvas＆＃39;）（id =＆＃39; wrap＆＃39;）。下面的代码水平居中画布，但它的顶部是拥抱页面的顶部，而不是像我期望的那样浮动到中心。我错过了什么？

body {
  margin:0px;
  background:#333
}

#wrap{
  width: 100vw;
  height: 100vw;
  padding:auto;
}

#canvas{
  width: 400px;
  height: 400px;
  margin:auto;
  background:#fff;
}

http://codepen.io/djminkus/pen/vKmkOE

Answer 1

auto中的margin:auto仅适用于水平对齐。

尝试：

#canvas{
  position: absolute;
  top: 50%; left:50%;
  transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);

  width: 400px;
  height: 400px;
  background:#fff;
}

body {
  margin: 0px;
  background: #333
}
#wrap {
  width: 100vw;
  height: 100vw;
}
#canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: #fff;
}

<div id='wrap'>
  <div id='canvas'></div>
</div>

或者用：

#canvas{
  position: absolute;
  top: 50%; left:50%;

  width: 400px;
  height: 400px;

  margin: -200px; /* half!!!! */

  background:#fff;
}

body {
  margin: 0px;
  background: #333
}
#wrap {
  width: 100vw;
  height: 100vw;
}
#canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px; /* half!!!! */
  background: #fff;
}

<div id='wrap'>
  <div id='canvas'></div>
</div>

Answer 2

如果没有display:table或flexbox（或翻译技巧），你不能只是垂直居中

试试这个

body,html {
  margin:0px;
  background:#333;
  height:100%;
}

#wrap{
  width: 100vw;
  height: 100%;
  padding:auto;
  display:table;
}

#canvas{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  width: 400px;
  height: 400px;
  margin:auto;
  background:#fff;
}

Answer 3

我认为弹性框可以解决您的问题：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  max-width: 50%;
}

<div class="container">
<div class="item"></div>
</div>

为什么这个div在视口中没有垂直居中？

3 个答案: