Question

我试图将div放在div中。起初，我以为我尝试做横向居中，但那不起作用。我看了这篇帖子的横向居中How to horizontally center a <div> in another <div>?

这是我的代码 http://codepen.io/anon/pen/VvLgrd。这是重要的代码的样式部分

#homepage {
  position: relative;
}
#homepage canvas, #console {
  position: absolute;
}
#console {
  background: rgb(224,168,227);
  width: 75%;
  margin: 0 auto;
}

由于某种原因，控制台div不在主页div的中心。我有点困惑。

另外，我正在查看如何纵向和横向居中。本网站https://css-tricks.com/centering-css-complete-guide/建议使用

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

我试了一下

#homepage {
  position: relative;
}
#homepage canvas, #console {
  position: absolute;
}
#console {
  background: rgb(224,168,227);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

但它只是水平居中。我也对它在做什么感到困惑？我不太了解百分比。因此，如果您有top: 50%表示＆＃34;您将#foppage＆＃34;的50％设置为最高边缘位置。我不明白。同样对于transform: translate(-50%, -50%);，这不意味着你转换为负数吗？

Answer 1

你的亲戚没有高度，所以它继承了#console div的高度。

如果您从#homepage移除相对位置，则div将居中。

＆＃13;

#homepage canvas, #console {
  position: absolute;
}
#console {
  background: rgb(224,168,227);
  width: 75%;
  height: 60px;
  top: 0;
  right: 0;
  bottom:0;
  left: 0;
  margin: auto;
}

＆＃13;

<div id="homepage">
    <canvas id="faces_bkgd"></canvas>
    <div id="console">
      <div id="name">
        <a href="./index.html">Jessica Gu</a>
      </div>
      <div id="content">
        <div id="menu">
        </div>
        <div id="information">
        </div>
      </div>
    </div>
    </div>

＆＃13;

Answer 2

通过移除画布上的#console，您可以纵向和横向居中position: absolute;：

Codepen

#homepage {
  position: relative;
}    
#console {
  position: absolute;
  background: rgb(224,168,227);
  width: 75%;
  margin: auto;
   top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Div中的水平居中Div不起作用

3 个答案: