CSS Animate问题

Question

自从我在下面的代码中将“position absolute”添加到我的div“.container”后，我的CSS动画代码从底部放大然后打嗝并将自己定位到中心。

如何让我的动画缩放只是放大到中心，没有这个打嗝，它先下降，然后一秒钟它会自动移动到中心？

如果我从.container div中移除绝对位置，则动画缩放工作正常，但它不再垂直居中（仅水平）。我使用位置绝对和左0和右0的原因是两个方向都居中。

这是我的代码：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0 auto;
  color: white;
  text-align: center;
  font-family: 'Lato', serif;
  background: linear-gradient(white 70px, #007580 70px);
  -webkit-text-size-adjust: none;
}

header,
footer {
  background: #007580
}

body,
main {
  display: flex;
  flex: 1;
}

body {
  flex-flow: column;
}

header {
  min-height: 35px;
}

footer {
  min-height: 35px;
}

section {
  margin: auto;
  width: 95%;
  height: 100%;
  color: black;
  background-color: white;
}

.categories {
  position: relative;
  top: 3px;
  color: white;
  font-size: 16px;
  font-weight: 300;
  word-spacing: 26px;
  padding-bottom: 2px;
}

.categories a {
  text-decoration: none;
  color: inherit;
}

.legal {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  font-weight: 300;
  word-spacing: 15px;
}

.legal a {
  text-decoration: none;
  font-size: 14px;
  color: white;
}

.quote {
  position: relative;
  margin: auto;
  font-size: 20px;
  font-weight: 300;
  bottom: 80px;
  height: 0;
}

.searchcontainer {
  position: relative;
  height: 0;
  bottom: 43px;
  margin: auto;
  width: 380px;
  ;
}

input[type=text] {
  width: 100%;
  display: inline-block;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 6px 0 7px 40px;
  background-image: url('https://image.ibb.co/j9esac/searchicon.png');
  background-position: 10px 6px;
  background-repeat: no-repeat;
  font-size: 16px;
  background-color: white;
}

.innercircle {
  height: 89px;
  width: 89px;
  border-radius: 50%;
  background-color: white;
  margin: auto;
  position: relative;
  bottom: 93px;
}

.outercircle {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  background-color: #007580;
  margin: auto;
  position: relative;
  top: 11px;
}

.D {
  font-size: 100px;
  font-weight: 100;
  position: relative;
  bottom: 196px;
  right: 3px;
  margin: auto;
  color: #007580;
  height: 0;
  font-family: 'Amiri', serif;
  letter-spacing: -10px;
}

.D a {
  text-decoration: none;
  color: inherit;
}

.R {
  font-size: 55px;
  font-weight: 100;
  position: relative;
  bottom: 173px;
  right: 2px;
  margin: auto;
  color: #007580;
  height: 0;
  font-family: 'Amiri', serif;
  letter-spacing: -10px;
}

.R a {
  text-decoration: none;
  color: inherit;
}

.ICONwhatsnew {
  position: relative;
  margin: auto;
  bottom: 194px;
  right: 191px;
  width: 0;
  display: block;
  height: 0;
}

.ICONwhatsnew a {
  text-decoration: none;
  color: inherit;
}

.ICONworldlanguages {
  position: relative;
  margin: auto;
  bottom: 190px;
  right: 116px;
  width: 0;
  display: block;
  height: 0;
}

.ICONworldlanguages a {
  text-decoration: none;
  color: inherit;
}

.ICONsignin {
  position: relative;
  margin: auto;
  bottom: 192px;
  left: 83px;
  width: 0;
  display: block;
  height: 0;
}

.ICONsignin a {
  text-decoration: none;
  color: inherit;
}

.ICONcart {
  position: relative;
  margin: auto;
  bottom: 192px;
  left: 149px;
  width: 0;
  display: block;
  height: 0;
}

.ICONcart a {
  text-decoration: none;
  color: inherit;
}

.container {
  font-size: 17px;
  font-weight: 400;
  color: #007580;
  top: 50%;
  left: 0;
  right: 0;
  position: absolute;
}

input[type=unams] {
  width: 80%;
  padding: 12px 45px;
  margin: 22px 0 0 0;
  border: 1px solid #007580;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-appearance: none;
  font-size: 17px;
  background-image: url('https://image.ibb.co/fZHHnc/signin.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 25px;
}

input[type=password] {
  width: 80%;
  padding: 12px 45px;
  /* first is how big you want the input box 2nd is positioning of word password */
  margin: 22px 0 15px 0;
  border: 1px solid #007580;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-appearance: none;
  font-size: 17px;
  background-image: url('https://image.ibb.co/jC7gfx/lock.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 25px;
}

.buttonlg {
  background-color: #007580;
  border: none;
  color: white;
  width: 25%;
  font-size: 17px;
  height: 38px;
  margin: auto;
  text-align: center;
}

.outerform {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerform {
  width: 90%;
  height: 90%;
}

.box {
  background-color: white;
  border: 1px solid #007580;
  height: 100%;
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

 ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: lightgrey;
  opacity: 1 !important;
}

.circlelogo1 {
  background: #007580;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: relative;
  margin: auto;
  /* 
    Child elements with absolute positioning will be 
     positioned relative to this div 
       */
}

.circlelogo2 {
  position: absolute;
  background: white;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  /*
         Put top edge and left edge in the center
       */
  top: 50%;
  left: 50%;
  margin: -9px 0px 0px -9px;
  /* 
        Offset the position correctly with
        minus half of the width and minus half of the height 
       */
}

<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
  <a href="index.html">D</a>
</div>
<div class="R">
  <a href="index.html">R</a>
</div>
<div class="quote">
  You will always be your greatest investment.
</div>
<div class="searchcontainer">
  <form>
    <input name="search" placeholder="Search all resources..." type="text">
  </form>
</div>
<div class="ICONsignin">
  <a href="signin.html"><img height="37px" src="https://svgshare.com/i/5SR.svg"></a>
</div>
<div class="ICONcart">
  <a href="#"><img height="39px" src="https://svgshare.com/i/5SE.svg"></a>
</div>
<div class="ICONworldlanguages">
  <a href="#"><img height="34px" src="https://svgshare.com/i/5XW.svg"></a>
</div>
<div class="ICONwhatsnew">
  <a href="#"><img height="43px" src="https://svgshare.com/i/5aX.svg"></a>
</div>
<header>
  <div class="categories">
    <a href="#"><b>Categories</b></a> <a href="#home">Newest</a> <a href="#about">Popular</a> <a href="#about">Music</a> <a href="#about">Youth</a>
  </div>
</header>
<main>
  <section>
    <div class="outerform">
      <div class="innerform">
        <form class="animate box">
          <div class="container">
            <div class="circlelogo1">
              <div class="circlelogo2">
              </div>
            </div>
            <input type="unams" placeholder="Username" name="uname" required>
            <input type="password" placeholder="Password" name="psw" required><br>
            <button class="buttonlg" type="submit">Log In</button>
          </div>
        </form>
      </div>
    </div>
  </section>
</main>
<footer>
  <div class="legal">
    <a href="#home">Contact</a> <a href="#home">Privacy</a> <a href="#about">Terms</a> <a href="#about">Copyright</a> <a href="#home">About</a>
  </div>
</footer>

Answer 1

您正在使用position:absolute并且父元素未设置为relative，因此该表单与创建此问题的缩放容器无关。您需要将position:relative设置为父容器，然后调整居中：

.box {
  ...
  position:relative; /*Added this*/
}

.container {
  ...
  transform:translate(0,-50%); /*Added this*/
  top: 50%;
  ...
}

这是完整的代码：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0 auto;
  color: white;
  text-align: center;
  font-family: 'Lato', serif;
  background: linear-gradient(white 70px, #007580 70px);
  -webkit-text-size-adjust: none;
}

header,
footer {
  background: #007580
}

body,
main {
  display: flex;
  flex: 1;
}

body {
  flex-flow: column;
}

header {
  min-height: 35px;
}

footer {
  min-height: 35px;
}

section {
  margin: auto;
  width: 95%;
  height: 100%;
  color: black;
  background-color: white;
}

.categories {
  position: relative;
  top: 3px;
  color: white;
  font-size: 16px;
  font-weight: 300;
  word-spacing: 26px;
  padding-bottom: 2px;
}

.categories a {
  text-decoration: none;
  color: inherit;
}

.legal {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  font-weight: 300;
  word-spacing: 15px;
}

.legal a {
  text-decoration: none;
  font-size: 14px;
  color: white;
}

.quote {
  position: relative;
  margin: auto;
  font-size: 20px;
  font-weight: 300;
  bottom: 80px;
  height: 0;
}

.searchcontainer {
  position: relative;
  height: 0;
  bottom: 43px;
  margin: auto;
  width: 380px;
  ;
}

input[type=text] {
  width: 100%;
  display: inline-block;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 6px 0 7px 40px;
  background-image: url('https://image.ibb.co/j9esac/searchicon.png');
  background-position: 10px 6px;
  background-repeat: no-repeat;
  font-size: 16px;
  background-color: white;
}

.innercircle {
  height: 89px;
  width: 89px;
  border-radius: 50%;
  background-color: white;
  margin: auto;
  position: relative;
  bottom: 93px;
}

.outercircle {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  background-color: #007580;
  margin: auto;
  position: relative;
  top: 11px;
}

.D {
  font-size: 100px;
  font-weight: 100;
  position: relative;
  bottom: 196px;
  right: 3px;
  margin: auto;
  color: #007580;
  height: 0;
  font-family: 'Amiri', serif;
  letter-spacing: -10px;
}

.D a {
  text-decoration: none;
  color: inherit;
}

.R {
  font-size: 55px;
  font-weight: 100;
  position: relative;
  bottom: 173px;
  right: 2px;
  margin: auto;
  color: #007580;
  height: 0;
  font-family: 'Amiri', serif;
  letter-spacing: -10px;
}

.R a {
  text-decoration: none;
  color: inherit;
}

.ICONwhatsnew {
  position: relative;
  margin: auto;
  bottom: 194px;
  right: 191px;
  width: 0;
  display: block;
  height: 0;
}

.ICONwhatsnew a {
  text-decoration: none;
  color: inherit;
}

.ICONworldlanguages {
  position: relative;
  margin: auto;
  bottom: 190px;
  right: 116px;
  width: 0;
  display: block;
  height: 0;
}

.ICONworldlanguages a {
  text-decoration: none;
  color: inherit;
}

.ICONsignin {
  position: relative;
  margin: auto;
  bottom: 192px;
  left: 83px;
  width: 0;
  display: block;
  height: 0;
}

.ICONsignin a {
  text-decoration: none;
  color: inherit;
}

.ICONcart {
  position: relative;
  margin: auto;
  bottom: 192px;
  left: 149px;
  width: 0;
  display: block;
  height: 0;
}

.ICONcart a {
  text-decoration: none;
  color: inherit;
}

.container {
  font-size: 17px;
  font-weight: 400;
  color: #007580;
  transform:translate(0,-50%);
  top: 50%;
  left: 0;
  right: 0;
  position: absolute;
}

input[type=unams] {
  width: 80%;
  padding: 12px 45px;
  margin: 22px 0 0 0;
  border: 1px solid #007580;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-appearance: none;
  font-size: 17px;
  background-image: url('https://image.ibb.co/fZHHnc/signin.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 25px;
}

input[type=password] {
  width: 80%;
  padding: 12px 45px;
  /* first is how big you want the input box 2nd is positioning of word password */
  margin: 22px 0 15px 0;
  border: 1px solid #007580;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-appearance: none;
  font-size: 17px;
  background-image: url('https://image.ibb.co/jC7gfx/lock.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 25px;
}

.buttonlg {
  background-color: #007580;
  border: none;
  color: white;
  width: 25%;
  font-size: 17px;
  height: 38px;
  margin: auto;
  text-align: center;
}

.outerform {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerform {
  width: 90%;
  height: 90%;
}

.box {
  background-color: white;
  border: 1px solid #007580;
  height: 100%;
  position:relative;
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

 ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: lightgrey;
  opacity: 1 !important;
}

.circlelogo1 {
  background: #007580;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: relative;
  margin: auto;
  /* 
    Child elements with absolute positioning will be 
     positioned relative to this div 
       */
}

.circlelogo2 {
  position: absolute;
  background: white;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  /*
         Put top edge and left edge in the center
       */
  top: 50%;
  left: 50%;
  margin: -9px 0px 0px -9px;
  /* 
        Offset the position correctly with
        minus half of the width and minus half of the height 
       */
}

<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
  <a href="index.html">D</a>
</div>
<div class="R">
  <a href="index.html">R</a>
</div>
<div class="quote">
  You will always be your greatest investment.
</div>
<div class="searchcontainer">
  <form>
    <input name="search" placeholder="Search all resources..." type="text">
  </form>
</div>
<div class="ICONsignin">
  <a href="signin.html"><img height="37px" src="https://svgshare.com/i/5SR.svg"></a>
</div>
<div class="ICONcart">
  <a href="#"><img height="39px" src="https://svgshare.com/i/5SE.svg"></a>
</div>
<div class="ICONworldlanguages">
  <a href="#"><img height="34px" src="https://svgshare.com/i/5XW.svg"></a>
</div>
<div class="ICONwhatsnew">
  <a href="#"><img height="43px" src="https://svgshare.com/i/5aX.svg"></a>
</div>
<header>
  <div class="categories">
    <a href="#"><b>Categories</b></a> <a href="#home">Newest</a> <a href="#about">Popular</a> <a href="#about">Music</a> <a href="#about">Youth</a>
  </div>
</header>
<main>
  <section>
    <div class="outerform">
      <div class="innerform">
        <form class="animate box">
          <div class="container">
            <div class="circlelogo1">
              <div class="circlelogo2">
              </div>
            </div>
            <input type="unams" placeholder="Username" name="uname" required>
            <input type="password" placeholder="Password" name="psw" required><br>
            <button class="buttonlg" type="submit">Log In</button>
          </div>
        </form>
      </div>
    </div>
  </section>
</main>
<footer>
  <div class="legal">
    <a href="#home">Contact</a> <a href="#home">Privacy</a> <a href="#about">Terms</a> <a href="#about">Copyright</a> <a href="#home">About</a>
  </div>
</footer>

---

顺便说一句，最好考虑另一种方式，而不是定位元素到中心。您可以使用flex来完成它，因为您已经在使用它：

.box {
  ....
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

然后从.container删除与定位相关的所有内容。

这是完整的代码：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0 auto;
  color: white;
  text-align: center;
  font-family: 'Lato', serif;
  background: linear-gradient(white 70px, #007580 70px);
  -webkit-text-size-adjust: none;
}

header,
footer {
  background: #007580
}

body,
main {
  display: flex;
  flex: 1;
}

body {
  flex-flow: column;
}

header {
  min-height: 35px;
}

footer {
  min-height: 35px;
}

section {
  margin: auto;
  width: 95%;
  height: 100%;
  color: black;
  background-color: white;
}

.categories {
  position: relative;
  top: 3px;
  color: white;
  font-size: 16px;
  font-weight: 300;
  word-spacing: 26px;
  padding-bottom: 2px;
}

.categories a {
  text-decoration: none;
  color: inherit;
}

.legal {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  font-weight: 300;
  word-spacing: 15px;
}

.legal a {
  text-decoration: none;
  font-size: 14px;
  color: white;
}

.quote {
  position: relative;
  margin: auto;
  font-size: 20px;
  font-weight: 300;
  bottom: 80px;
  height: 0;
}

.searchcontainer {
  position: relative;
  height: 0;
  bottom: 43px;
  margin: auto;
  width: 380px;
  ;
}

input[type=text] {
  width: 100%;
  display: inline-block;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 6px 0 7px 40px;
  background-image: url('https://image.ibb.co/j9esac/searchicon.png');
  background-position: 10px 6px;
  background-repeat: no-repeat;
  font-size: 16px;
  background-color: white;
}

.innercircle {
  height: 89px;
  width: 89px;
  border-radius: 50%;
  background-color: white;
  margin: auto;
  position: relative;
  bottom: 93px;
}

.outercircle {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  background-color: #007580;
  margin: auto;
  position: relative;
  top: 11px;
}

.D {
  font-size: 100px;
  font-weight: 100;
  position: relative;
  bottom: 196px;
  right: 3px;
  margin: auto;
  color: #007580;
  height: 0;
  font-family: 'Amiri', serif;
  letter-spacing: -10px;
}

.D a {
  text-decoration: none;
  color: inherit;
}

.R {
  font-size: 55px;
  font-weight: 100;
  position: relative;
  bottom: 173px;
  right: 2px;
  margin: auto;
  color: #007580;
  height: 0;
  font-family: 'Amiri', serif;
  letter-spacing: -10px;
}

.R a {
  text-decoration: none;
  color: inherit;
}

.ICONwhatsnew {
  position: relative;
  margin: auto;
  bottom: 194px;
  right: 191px;
  width: 0;
  display: block;
  height: 0;
}

.ICONwhatsnew a {
  text-decoration: none;
  color: inherit;
}

.ICONworldlanguages {
  position: relative;
  margin: auto;
  bottom: 190px;
  right: 116px;
  width: 0;
  display: block;
  height: 0;
}

.ICONworldlanguages a {
  text-decoration: none;
  color: inherit;
}

.ICONsignin {
  position: relative;
  margin: auto;
  bottom: 192px;
  left: 83px;
  width: 0;
  display: block;
  height: 0;
}

.ICONsignin a {
  text-decoration: none;
  color: inherit;
}

.ICONcart {
  position: relative;
  margin: auto;
  bottom: 192px;
  left: 149px;
  width: 0;
  display: block;
  height: 0;
}

.ICONcart a {
  text-decoration: none;
  color: inherit;
}

.container {
  font-size: 17px;
  font-weight: 400;
  color: #007580;
}

input[type=unams] {
  width: 80%;
  padding: 12px 45px;
  margin: 22px 0 0 0;
  border: 1px solid #007580;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-appearance: none;
  font-size: 17px;
  background-image: url('https://image.ibb.co/fZHHnc/signin.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 25px;
}

input[type=password] {
  width: 80%;
  padding: 12px 45px;
  /* first is how big you want the input box 2nd is positioning of word password */
  margin: 22px 0 15px 0;
  border: 1px solid #007580;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-appearance: none;
  font-size: 17px;
  background-image: url('https://image.ibb.co/jC7gfx/lock.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 25px;
}

.buttonlg {
  background-color: #007580;
  border: none;
  color: white;
  width: 25%;
  font-size: 17px;
  height: 38px;
  margin: auto;
  text-align: center;
}

.outerform {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerform {
  width: 90%;
  height: 90%;
}

.box {
  background-color: white;
  border: 1px solid #007580;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

 ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: lightgrey;
  opacity: 1 !important;
}

.circlelogo1 {
  background: #007580;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: relative;
  margin: auto;
  /* 
    Child elements with absolute positioning will be 
     positioned relative to this div 
       */
}

.circlelogo2 {
  position: absolute;
  background: white;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  /*
         Put top edge and left edge in the center
       */
  top: 50%;
  left: 50%;
  margin: -9px 0px 0px -9px;
  /* 
        Offset the position correctly with
        minus half of the width and minus half of the height 
       */
}

<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
  <a href="index.html">D</a>
</div>
<div class="R">
  <a href="index.html">R</a>
</div>
<div class="quote">
  You will always be your greatest investment.
</div>
<div class="searchcontainer">
  <form>
    <input name="search" placeholder="Search all resources..." type="text">
  </form>
</div>
<div class="ICONsignin">
  <a href="signin.html"><img height="37px" src="https://svgshare.com/i/5SR.svg"></a>
</div>
<div class="ICONcart">
  <a href="#"><img height="39px" src="https://svgshare.com/i/5SE.svg"></a>
</div>
<div class="ICONworldlanguages">
  <a href="#"><img height="34px" src="https://svgshare.com/i/5XW.svg"></a>
</div>
<div class="ICONwhatsnew">
  <a href="#"><img height="43px" src="https://svgshare.com/i/5aX.svg"></a>
</div>
<header>
  <div class="categories">
    <a href="#"><b>Categories</b></a> <a href="#home">Newest</a> <a href="#about">Popular</a> <a href="#about">Music</a> <a href="#about">Youth</a>
  </div>
</header>
<main>
  <section>
    <div class="outerform">
      <div class="innerform">
        <form class="animate box">
          <div class="container">
            <div class="circlelogo1">
              <div class="circlelogo2">
              </div>
            </div>
            <input type="unams" placeholder="Username" name="uname" required>
            <input type="password" placeholder="Password" name="psw" required><br>
            <button class="buttonlg" type="submit">Log In</button>
          </div>
        </form>
      </div>
    </div>
  </section>
</main>
<footer>
  <div class="legal">
    <a href="#home">Contact</a> <a href="#home">Privacy</a> <a href="#about">Terms</a> <a href="#about">Copyright</a> <a href="#home">About</a>
  </div>
</footer>

Answer 2

有一些问题。在你的.box造型你应该添加position: relative;这将迫使.container的绝对定位尊重其父，在这种情况下.box的定位和大小。第二个是top: 50%;上的.container。在某些情况下，似乎可以使项目居中，但在其他情况下则不然。你可以做些什么来.container中.box加上transform: translate(0, -50%);抵消top: 50%并使元素居中。同样可以用left: 50%和transform: translate(-50%, -50%);水平完成。

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0 auto;
  color: white;
  text-align: center;
  font-family: 'Lato', serif;
  background: linear-gradient(white 70px, #007580 70px);
  -webkit-text-size-adjust: none;
}

header,
footer {
  background: #007580
}

body,
main {
  display: flex;
  flex: 1;
}

body {
  flex-flow: column;
}

header {
  min-height: 35px;
}

footer {
  min-height: 35px;
}

section {
  margin: auto;
  width: 95%;
  height: 100%;
  color: black;
  background-color: white;
}

.categories {
  position: relative;
  top: 3px;
  color: white;
  font-size: 16px;
  font-weight: 300;
  word-spacing: 26px;
  padding-bottom: 2px;
}

.categories a {
  text-decoration: none;
  color: inherit;
}

.legal {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  font-weight: 300;
  word-spacing: 15px;
}

.legal a {
  text-decoration: none;
  font-size: 14px;
  color: white;
}

.quote {
  position: relative;
  margin: auto;
  font-size: 20px;
  font-weight: 300;
  bottom: 80px;
  height: 0;
}

.searchcontainer {
  position: relative;
  height: 0;
  bottom: 43px;
  margin: auto;
  width: 380px;
  ;
}

input[type=text] {
  width: 100%;
  display: inline-block;
  border: 2px solid #ddd;
  border-radius: 4px;
  padding: 6px 0 7px 40px;
  background-image: url('https://image.ibb.co/j9esac/searchicon.png');
  background-position: 10px 6px;
  background-repeat: no-repeat;
  font-size: 16px;
  background-color: white;
}

.innercircle {
  height: 89px;
  width: 89px;
  border-radius: 50%;
  background-color: white;
  margin: auto;
  position: relative;
  bottom: 93px;
}

.outercircle {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  background-color: #007580;
  margin: auto;
  position: relative;
  top: 11px;
}

.D {
  font-size: 100px;
  font-weight: 100;
  position: relative;
  bottom: 196px;
  right: 3px;
  margin: auto;
  color: #007580;
  height: 0;
  font-family: 'Amiri', serif;
  letter-spacing: -10px;
}

.D a {
  text-decoration: none;
  color: inherit;
}

.R {
  font-size: 55px;
  font-weight: 100;
  position: relative;
  bottom: 173px;
  right: 2px;
  margin: auto;
  color: #007580;
  height: 0;
  font-family: 'Amiri', serif;
  letter-spacing: -10px;
}

.R a {
  text-decoration: none;
  color: inherit;
}

.ICONwhatsnew {
  position: relative;
  margin: auto;
  bottom: 194px;
  right: 191px;
  width: 0;
  display: block;
  height: 0;
}

.ICONwhatsnew a {
  text-decoration: none;
  color: inherit;
}

.ICONworldlanguages {
  position: relative;
  margin: auto;
  bottom: 190px;
  right: 116px;
  width: 0;
  display: block;
  height: 0;
}

.ICONworldlanguages a {
  text-decoration: none;
  color: inherit;
}

.ICONsignin {
  position: relative;
  margin: auto;
  bottom: 192px;
  left: 83px;
  width: 0;
  display: block;
  height: 0;
}

.ICONsignin a {
  text-decoration: none;
  color: inherit;
}

.ICONcart {
  position: relative;
  margin: auto;
  bottom: 192px;
  left: 149px;
  width: 0;
  display: block;
  height: 0;
}

.ICONcart a {
  text-decoration: none;
  color: inherit;
}

.container {
  font-size: 17px;
  font-weight: 400;
  color: #007580;
  top: 50%;
  left: 0;
  right: 0;
  position: absolute;
  transform: translate(0, -50%);
}

input[type=unams] {
  width: 80%;
  padding: 12px 45px;
  margin: 22px 0 0 0;
  border: 1px solid #007580;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-appearance: none;
  font-size: 17px;
  background-image: url('https://image.ibb.co/fZHHnc/signin.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 25px;
}

input[type=password] {
  width: 80%;
  padding: 12px 45px;
  /* first is how big you want the input box 2nd is positioning of word password */
  margin: 22px 0 15px 0;
  border: 1px solid #007580;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-appearance: none;
  font-size: 17px;
  background-image: url('https://image.ibb.co/jC7gfx/lock.png');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  background-size: 25px;
}

.buttonlg {
  background-color: #007580;
  border: none;
  color: white;
  width: 25%;
  font-size: 17px;
  height: 38px;
  margin: auto;
  text-align: center;
}

.outerform {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerform {
  width: 90%;
  height: 90%;
}

.box {
position: relative;
  background-color: white;
  border: 1px solid #007580;
  height: 100%;
}

.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

 ::-webkit-input-placeholder {
  /* WebKit browsers */
  color: lightgrey;
  opacity: 1 !important;
}

.circlelogo1 {
  background: #007580;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: relative;
  margin: auto;
  /* 
    Child elements with absolute positioning will be 
     positioned relative to this div 
       */
}

.circlelogo2 {
  position: absolute;
  background: white;
  border-radius: 50%;
  height: 18px;
  width: 18px;
  /*
         Put top edge and left edge in the center
       */
  top: 50%;
  left: 50%;
  margin: -9px 0px 0px -9px;
  /* 
        Offset the position correctly with
        minus half of the width and minus half of the height 
       */
}

<div class="outercircle"></div>
<div class="innercircle"></div>
<div class="D">
  <a href="index.html">D</a>
</div>
<div class="R">
  <a href="index.html">R</a>
</div>
<div class="quote">
  You will always be your greatest investment.
</div>
<div class="searchcontainer">
  <form>
    <input name="search" placeholder="Search all resources..." type="text">
  </form>
</div>
<div class="ICONsignin">
  <a href="signin.html"><img height="37px" src="https://svgshare.com/i/5SR.svg"></a>
</div>
<div class="ICONcart">
  <a href="#"><img height="39px" src="https://svgshare.com/i/5SE.svg"></a>
</div>
<div class="ICONworldlanguages">
  <a href="#"><img height="34px" src="https://svgshare.com/i/5XW.svg"></a>
</div>
<div class="ICONwhatsnew">
  <a href="#"><img height="43px" src="https://svgshare.com/i/5aX.svg"></a>
</div>
<header>
  <div class="categories">
    <a href="#"><b>Categories</b></a> <a href="#home">Newest</a> <a href="#about">Popular</a> <a href="#about">Music</a> <a href="#about">Youth</a>
  </div>
</header>
<main>
  <section>
    <div class="outerform">
      <div class="innerform">
        <form class="animate box">
          <div class="container">
            <div class="circlelogo1">
              <div class="circlelogo2">
              </div>
            </div>
            <input type="unams" placeholder="Username" name="uname" required>
            <input type="password" placeholder="Password" name="psw" required><br>
            <button class="buttonlg" type="submit">Log In</button>
          </div>
        </form>
      </div>
    </div>
  </section>
</main>
<footer>
  <div class="legal">
    <a href="#home">Contact</a> <a href="#home">Privacy</a> <a href="#about">Terms</a> <a href="#about">Copyright</a> <a href="#home">About</a>
  </div>
</footer>