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

Question

我怎样才能根据父元素垂直和水平放置子元素。

#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中间。我将如何实现这一目标？我觉得这很简单。

谢谢

Answer 1

你可以做一些像...

#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);
}

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