Html 垂直对齐问题！绝对定位。Can'；我不能让它工作_Html_Css

Html 垂直对齐问题！绝对定位。Can'；我不能让它工作

html css

Html 垂直对齐问题！绝对定位。Can'；我不能让它工作,html,css,Html,Css,我有两个div，一个通过绝对定位显示在另一个上方。我无法使垂直对齐工作。我读了很多不同的方法，但仍然无法理解。下面这个方法似乎是比较流行的方法之一，但它仍然不起作用实际的HTML如下所示： <div class="header_slider_container"> <div class="header_slider_wrapper"> <div id="form_side"> <div id="form_side_div"> <h2 id

我有两个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>

.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%; 
}

我做错了什么？请告诉我为什么我是个白痴

编辑：为了增加清晰度，这里有一张图片。表单（在黑暗背景中）需要垂直居中于其后面滑块的高度

这里有两种简单的方法可以将所有内容水平和垂直居中

技术一（演示地点）：

.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%; 
}

.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%; 
}

技术二（演示地点）：

.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%; 
}

.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>


与我们联系
[此处为表格代码]
[此处显示滑块代码]

您能进一步说明您需要什么吗？你是想把两个div的左边对齐吗？@Harry类似的，是的。试图使#form#u侧浮动在#slider#u侧的顶部，朝向左侧。想象一个长方形，它的大小是#slider#u。现在想想一个大约300px，300px的正方形，这就是形状大小。我想把正方形放在矩形上，而不影响矩形在页面上的位置。然后我想垂直对齐正方形和矩形的高度。图片会更好吗？“我可以快速创建一个。”AdrianoBatista，你找到答案了吗？