Question

我有两个div，一个通过绝对定位显示在另一个上面。我不能让垂直对齐工作。我阅读了许多不同的方法来做到这一点，但仍然无法弄明白。下面这个方法似乎是比较流行的方法之一，但它仍然不起作用！

实际的HTML如下所示：

<div class="header_slider_container">
<div class="header_slider_wrapper">

<div id="form_side">
<div id="form_side_div">
<h2 id="form_side_title">GET IN TOUCH WITH US</h2>
[form code goes here]
</div>
</div>

<div id="slider_side">
[slider code goes here]
</div>

</div>
</div>

当浏览器最大化时，滑块代码会自动填充空间宽度（100％宽度），高度大约为500px左右。随着浏览器开始缩小，滑块也开始缩小。但我可以稍后通过媒体查询处理这个问题。我只需先让垂直对齐工作。

表单代码恰好适合容器，无论大小多少都需要400x300。

CSS看起来像这样：

.header_slider_container {
    width: 100%; 
    margin-top: 89px;
}

.header_slider_wrapper {
    width:100%; 
    background: orange; 
}

#form_side {
    position: absolute;
    z-index: 9000;
    margin-left: 15px;
    width: 30%;
}

#form_side_div {
    padding: 0 15px;
    background: rgba(22,22,22,0.5);
}

#form_side_title {
    color: #006298; 
    padding-bottom: 5px;
}

#slider_side {
    width: 100%; 
}

我做错了什么？告诉我为什么我是个白痴，拜托！

编辑：这是一张图片，以增加清晰度。 Form（在深色背景内）需要垂直居中于其后面滑块的高度。 enter image description here

Answer 1

以下两种简单的方法可以水平和垂直居中显示所有内容。

技术一（http://jsbin.com/mahuj/1/edit演示）：

.header_slider_container {
  /* width: 100%; */
  /* margin-top: 89px; */
  background-color: yellow;
  width: 50%; /* Can be any % or px. Defaults to 100%. */
  height: 50%; /* Can be any % or px. Defaults to 100%. */
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.header_slider_wrapper {
  width:100%; 
  background: orange; 
}

#form_side {
  position: absolute;
  z-index: 9000;
  margin-left: 15px;
  width: 30%;
}

#form_side_div {
  padding: 0 15px;
  background: rgba(22,22,22,0.5);
}

#form_side_title {
  color: #006298; 
  padding-bottom: 5px;
}

#slider_side {
  width: 100%; 
}

技术二（http://jsbin.com/lunuq/1/edit演示）：

.header_slider_container {
  /* width: 100%; */
  /* margin-top: 89px; */
  background-color: yellow;
  width: 200px; /* Must declare a size. Can't use %. */
  height: 200px; /* Must declare a size. Can't use %. */
  position: absolute; /* Or fixed. */
  top: 50%;
  margin-top: -100px;
  left: 50%;
  margin-left: -100px;
}

.header_slider_wrapper {
  width:100%; 
  background: orange; 
}

#form_side {
  position: absolute;
  z-index: 9000;
  margin-left: 15px;
  width: 30%;
}

#form_side_div {
  padding: 0 15px;
  background: rgba(22,22,22,0.5);
}

#form_side_title {
  color: #006298; 
  padding-bottom: 5px;
}

#slider_side {
  width: 100%; 
}

此处再次显示您的HTML，但缩进：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>

    <div class="header_slider_container">
      <div class="header_slider_wrapper">

        <div id="form_side">
          <div id="form_side_div">

          <h2 id="form_side_title">GET IN TOUCH WITH US</h2>
          [form code goes here]

          </div>
        </div>

        <div id="slider_side">
        [slider code goes here]
        </div>

      </div>
    </div>

  </body>
</html>

垂直对齐问题！绝对定位。无法让它发挥作用

1 个答案: