html - 尝试使用CSS将子元素垂直和水平居中

我怎样才能垂直和水平地根据父级的子元素。

#bigBanner  {
position: relative;
width: 960px;
height: 483px;
margin: 0 auto;
background-image:url(../wpimages/sliderbg.jpg);
}

#bannerQuote    {
width: 518px;
height: 127px;
margin: 0 auto;
background-color: #0d0f11;
opacity: 0.95;
filter:Alpha(opacity=95);
}

是代码，bannerQuote恰好位于bigBanner的中间。我将如何实现？我觉得这很简单。

谢谢

最佳答案

您可以做类似...

#bannerQuote {
  position:absolute;
  top: 50%;
  left: 50%;
  margin-left: -259px;
  margin-top: -64px;
  width: 518px;
  height: 127px;
  background-color: #0d0f11;
  opacity: .95;
  filter:Alpha(opacity=95);
}

其中左边缘和上边缘边缘由您的高度和宽度决定。由于您将左上角设置为父级容器的中心，因此您希望将子元素的一半宽度返回左侧，并将其一半高度返回顶部。

关于html - 尝试使用CSS将子元素垂直和水平居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16154839/