Question

我是一个没有经验的HTML学习者，所以请耐心等待。

即使调整大小，我也试图让<div>（#banner）留在浏览器的中心;所以我想我需要另一个<div>作为整个浏览器的#container。

#banner需要将其宽度扩展100％，因此我必须使用绝对位置。

尽管我已经在stackoverflow中查看了其他几篇帖子 - 但我无法想出如何在我的特定情况下实现他们的解决方案。

HTML

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
<div>
   <div id="banner">
   </div>
</div>
</body>
</html>

CSS

#container{

}
#banner{
    background-color: #e51400;
    height: 400px;
    position: absolute;
    left: 0px;
    right: 0px;
    font-weight: bold;
    text-align: center;
    vertical-align:middle;
}

这基本上就是我想要完成的事情 enter image description here

除了#banner之外，我真的需要另一个<div>以便将它放在中心吗？

Answer 1

好吧，由于我收到了大量的回复，我能够回答我自己的问题。无论如何，感谢this page我能够在这种情况下调整代码以满足我的需要。

这是我的最终代码：

CSS

 #container {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  overflow: visible;
  background-color:black;
}

#banner {
  height: 400px;
  position: absolute;
  top: -200px; //needs to the negative value of half the height
  left: 0px;
  right: 0px;
  background-color:red;
}

当使用绝对位置时，如何将<div>放在另一个<div>中间（垂直）？</div> </div>

1 个答案: