Html 如何在另一个分区内（垂直和水平）以响应方式将窗体居中

我一直在努力将一个包含表单的div

。表单组

放在另一个div

#myCarousel

的中心位置，垂直和水平方向都有响应。（适用于不同的设备宽度）

我尝试过用像素、百分比进行绝对定位，但没有成功。我尝试将表单作为

#myCarousel

中的子元素，但未能使其正常工作

我的目标是使窗体位于旋转木马的精确中心（在图像滑块上），并使图像在背景中滑动，同时窗体保持固定在中心

下面是我的代码的样子

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  ...
</div>
<div class="form-group">
  <form action="thank-you.php" method="post">
    <input class="form-control" type="text" name="name" placeholder="Enter your name">
    <input class="form-control" type="text" name="mobile" placeholder="Enter mobile number">
    <input class="form-control" type="text" name="email" placeholder="Enter your email address">
    <input class="form-control" type="text" name="address" placeholder="Enter your area and landmark">
    <select id="multi-select" name="products[]" multiple="multiple">
      <option value="product1">Product 1</option>
      <option value="product2">Product 2</option>
      <option value="product3">Product 3</option>
    </select>
    <input type="submit">
  </form>
</div>

...
产品1
产品2
产品3

---

如果您能在这里指导我，我将非常高兴。

页边距：0px自动或位置：绝对；左：50%；最高：50%；要居中

请将其添加到您的

表单组

类中

.form-group{
    max-width: 300px;
    margin: auto;
   }

将

粘贴在

内部应使

形成一个组
垂直和水平居中于
#myCarousel

首先，您需要将
.form group
div放置在
#myCarouse
div中，然后使用
位置：绝对
和
变换
技巧，您可以将其垂直和水平居中对齐

HTML

您需要将.form组放在#myCarousel内

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  ...
</div>
<div class="form-group">
  <form action="thank-you.php" method="post">
    <input class="form-control" type="text" name="name" placeholder="Enter your name">
    <input class="form-control" type="text" name="mobile" placeholder="Enter mobile number">
    <input class="form-control" type="text" name="email" placeholder="Enter your email address">
    <input class="form-control" type="text" name="address" placeholder="Enter your area and landmark">
    <select id="multi-select" name="products[]" multiple="multiple">
      <option value="product1">Product 1</option>
      <option value="product2">Product 2</option>
      <option value="product3">Product 3</option>
    </select>
    <input type="submit">
  </form>
</div>

.form-group {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}
在CSS中尝试以下内容：

.slider-container {
  position: relative;
}
.form-group { # you should add and define css for custom class instead of overide Bootstrap class.
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
}

和HTML：

<div class="slider">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    .....
  </div>
  <div class="form-group">
    <form></form>
  </div>
</div>


.....
我最初尝试过这个方法，图像滑块和表单并排放置（因为它们都是#myCarousel div的子对象）。这会使表单在#myCarousel div下方居中。我还需要将其垂直居中（在#myCarousel div内）哇！谢谢，这正是我想要的。我没有使用transform:translate（-50%，-50%）；早期的。您能解释一下它的作用吗？@RahulMakhija
左：50%
和
顶：50%
根据父元素的宽度和高度平移元素，但仅使用此项无法使其居中…现在您需要使用
变换：平移（-50%，-50%）
根据其自身的高度和宽度高度进行翻译…感谢您的文章。我觉得有点复杂。这篇文章有一个更好的解释@RahulMakhija翻译的原因与宽度和高度无关。。。上/左考虑元素的左上角…所以用top；50%和左：50%，你将中心的左上角的DIV内的父，但我们需要它来考虑我们的元素的中心点，这样做，我们使用了一个负转义，这只是一个视觉效果，把中心点在左上角的地方[或我们可以做它负边际]顺便说一句，最好将问题标记为重复问题，避免一次又一次地出现同一个问题……是的，这很有效！
.slider-container {
  position: relative;
}
.form-group { # you should add and define css for custom class instead of overide Bootstrap class.
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
}

<div class="slider">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    .....
  </div>
  <div class="form-group">
    <form></form>
  </div>
</div>