字段集对齐在 html CSS 中不起作用

Question

我有HTML CSS代码，我希望在其中使用弹出式联系表单进行覆盖。 网页代码：

<div class="overlay" id= "form">
<form accept-charset="UTF-8"  class="infusion-form">

<!-- First fieldset starts from here -->
<fieldset id="ff">
<h2 class="fs-title"> Some heading</h2>
<div class="infusion-field">    
<input class="infusion-field-input" placeholder=" First Name " type="text" required="required"/>
</div>
<div class="infusion-field">
<input class="infusion-field-input" required="required" placeholder=" Last Name " type="text" />
</div>
<!-- The NEXT button -->
<input type="submit" name="next" class="next action-button" id = "next" value="Next"  />
</fieldset>
<!-- Second feildset start from here -->
<fieldset id="sf">
<h2 class="fs-title">  Some heading 2</h2>
<div class="infusion-field">
<input class="infusion-field-input" placeholder=" Phone Number " type="text" />
</div>
<div class="infusion-field">
<input class="infusion-field-input"  placeholder=" Email-id " type="email" />
</div>
<!-- Submit Button-->
<input type="submit" name="submit" class="submit action-button" id = "submit" value="Submit"  />
</fieldset>
</form>
</div>

相应的 CSS 代码将是

.overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(204,204,204,0.8);
z-index: 10;
}
.infusion-field-input {
width: 100%;
margin-bottom: 30px;
width: 281px;
height: 30px;
}
.infusion-form fieldset {
background: #c8e6c9;
border-radius: 3px;
margin-top: 10px;
padding: 30px 30px;
box-sizing: border-box;
width: 20%;
opacity: 1;
margin-left: 769px;
position: absolute;
}
/*//Hidden field sets*/
.infusion-form fieldset:not(:first-of-type) {
display: none;
}

/*Button*/
.infusion-form .action-button {
cursor: pointer;
width: 100%;
border: none;
background: #4CAF50;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px;
}
.infusion-form .action-button:hover, .infusion-form .action-button:focus {
background: #43A047;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.infusion-form .action-button:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.infusion-form .action-button:disabled{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}

现在，每当我减小屏幕大小时，我的 contact-f0rm 弹出窗口都不会相应地移动。如果尺寸进一步减小，它有时会离开屏幕。

找不到需要修改的div/类。 JS小提琴

Answer 1

我认为您希望表单居中，因此请使用左右边距的尖端来自动消除绝对位置

.infusion-form fieldset {
background: #c8e6c9;
border-radius: 3px;
margin-top: 10px;
padding: 30px 30px;
box-sizing: border-box;
width: 20%;
opacity: 1;
margin-left: auto;
margin-right: auto;
}

在浏览器中检查了Chrome和Firefox，它可以工作