Html 如何使背景响应并保持内容中心？

我到处都找过了，似乎没有什么能解决我的问题。这是仅包含普通HTML登录表单的HTML：

正文{
背景图片：url(http://i63.tinypic.com/raytyu.jpg);
背景尺寸：封面；
背景重复：无重复；
}
.H1标签{
填充：0px；
字体大小：150%；
文本对齐：居中；
字体系列：Arial、Helvetica、无衬线字体；
颜色：#fff；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#b2e0ef；
}
李{
浮动：中心；
}
a:悬停：未（.active）{
背景色：#3399ff；
文字装饰：无；
}
李阿{
显示：块；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
颜色：白色；
字体大小：粗体；
}
/*-----------登录表单CSS-------------------*/
#登入表格{
背景色：rgba（178224239,0.6）；
位置：中心；
填充：20px；
位置：绝对位置；
左边距：550px；
右边距：550px；
边缘顶部：150px；
边界半径：3px；
边框：1px实心；
边框颜色：#fff；
}
.登入表格{
文本对齐：居中；
字体大小：20px；
}

我的花园





登录

使用下面的css，在最后一次尝试更改图像url时链接到代码笔（如果它不起作用）

    body{
  background:url(https://pixabay.com/static/uploads/photo/2014/01/22/19/44/flower-garden-250016_960_720.jpg) no-repeat center center;
  background-size:cover;
}
.h1Tag{
  padding: 0px;
  font-size: 150%;

  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}
ul{
  list-style-type:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #b2e0ef;
}
li{
  float: center;
}
a:hover:not(.active) {
  background-color: #3399ff;
  text-decoration:none;
}
li a{
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: white;
  font-weight:bold;
}
/*-----------LOGIN FORM CSS-------------------*/
#login_form{
  background-color: rgba(178,224,239,0.6);
  padding: 20px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 150px;
  border-radius:3px;
  border: 1px solid;
  border-color: #fff;
  width:250px;
}
.login_form{
  text-align:center;
  font-size: 20px;
}

试试这个：

#login_form {
background-color: rgba(178,224,239,0.6);
position: center;
padding: 20px;
/* position: absolute; */
/* margin-right: 550px; */
/* margin-top: 150px; */
border-radius: 3px;
border: 1px solid;
border-color: #fff;
margin: 150px auto;
width: 236px;
}

在你的html中，我只添加了两个

div

作为你

的父母。登录表单

并将

背景

交给超级

父母

<div class="container">
  <div class="login">
    <div id="login_form">
      <div class="h1Tag">
        <h1>MyGarden</h1>       
      </div>
      <div class="login_form">
        <input type="text" name="email" id="email" placeholder="Email address"><br>
        <input type="password" name="password" id="password" placeholder="Password"><br><br>
        <button type="submit" id="submit" name="submit">Log In</button>
      </div>
    </div>  

  </div>  
</div>

---

编辑以下2个css内容

设置html而不是正文的背景， 将高度设置为100%， 如果设置背景大小：100%100%；然后它将拉伸并占据100%的屏幕 如果设置背景尺寸：cover，则会显示足够的图像部分，而不是图像的整个部分，不会拉伸图像
一,

不以像素为单位设置边距，以%为单位设置边距 设置框的宽度并删除px页边距 移除位置，此处不需要

二,

---

请提供工作片段，以便更好地理解您的问题为什么使用绝对位置？它可以保持登录表单的稳定。您可以提供JS提琴吗？忘记说：对于边距：自动工作它确实需要相对位置…谢谢Rohit-我不熟悉边距值。然而，当在移动设备上查看时，会出现大量空白-这是可以避免的吗？此代码中有一个小错误-位置：中心无效cssThank you Ahmed。你能解释一下容器css中的位置和显示属性吗？只是为了说明可以用不同的方式来完成事情，没有额外的div，有点相同的解决方案：

.container{
  background-image:url(http://i63.tinypic.com/raytyu.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  display:table;
}
.login{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.h1Tag{
  padding: 0px;
  font-size: 150%;

  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
}
ul{
  list-style-type:none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #b2e0ef;
}
li{
  float: center;
}
a:hover:not(.active) {
  background-color: #3399ff;
  text-decoration:none;
}
li a{
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: white;
  font-weight:bold;
}
/*-----------LOGIN FORM CSS-------------------*/
#login_form{
  background-color: rgba(178,224,239,0.6);
  position:center;
  padding: 20px;
  border-radius:3px;
  border: 1px solid;
  border-color: #fff;
  display:inline-block;
}
.login_form{
  text-align:center;
  font-size: 20px;
}

html {
    background-image: url(http://i63.tinypic.com/raytyu.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
}

#login_form {
    background-color: rgba(178,224,239,0.6);
    position: center;
    padding: 20px;
    /* position: absolute; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    border-radius: 3px;
    border: 1px solid;
    border-color: #fff;
    width: 235px;
}