代码之家  ›  专栏  ›  技术社区  ›  SCodeSK71

CSS动画问题

css-animations zooming css html
  •  2
  • SCodeSK71  · 技术社区  · 6 年前

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

    我如何才能使我的动画缩放只需向右缩放到中心,而不会出现这种打嗝,它先下降,然后再下降一秒,然后自动移动到中心?

    如果我从中删除绝对位置。container div动画缩放效果很好,但它不再垂直居中(只是水平居中)。我使用position absolute和left 0以及right 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>
    2 回复  |  直到 6 年前
        1
  •  0
  •   Temani Afif    6 年前

    您正在使用 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=“内圈”></div>
<div class=“D”>
<a href=“index.html”></a>
</div>
<div class=“R”>
<a href=“index.html”></a>
</div>
<div class=“quote”>
你永远是你最大的投资。
</div>
<div class=“searchcontainer”>
<表单(>);
<输入name=“search”placeholder=“搜索所有资源…”type=“text”>
</表单(>);
</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>
<收割台(>);
<div class=“类别”>
<a href=“#”>&书信电报;b>类别(</b></a>&书信电报;a href=“#主页”>最新(</a>&书信电报;a href=“#关于”>流行(</a>&书信电报;a href=“#关于”>音乐</a>&书信电报;a href=“#关于”>年轻人</a>
</div>
</收割台(>);
<主(>);
<截面(>);
<div class=“outerform”>
<div class=“innerform”>
<表单class=“动画框”>
<div class=“容器”>
<div class=“circlelogo1”>
<div class=“circlelogo2”>
</div>
</div>
<需要输入type=“unas”placeholder=“Username”name=“uname”>
<需要输入type=“password”placeholder=“password”name=“psw”>&书信电报;br>
<按钮class=“buttonlg”type=“submit”>登录(<)/按钮(>);
</div>
</表单(>);
</div>
</div>
</截面(>);
</主(>);
<页脚(>);
<div class=“法律”>
<a href=“#主页”>联系人(<)/a>&书信电报;a href=“#主页”>隐私(</a>&书信电报;a href=“#关于”>术语(</a>&书信电报;a href=“#关于”>版权所有</a>&书信电报;a href=“#主页”>关于(<)/a>
</div>
</页脚(>);
        2
  •  0
  •   Wild Beard    6 年前

    有几个问题。在您的 .box 应添加的样式 position: relative; 这将强制 .container 的绝对位置,以尊重其父级,在这种情况下 .盒 的位置和大小。第二个是 top: 50%; 在…上 .容器 . 在某些情况下,似乎可以将项目置于中心位置,但在其他情况下则不会。您可以对中心做些什么 .容器 在内部 .盒 是添加 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>
    推荐文章
    Softly  ·  单选按钮未按预期取值
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Thirumal isireddy  ·  在导航栏顺风css中,img被扭曲,而不是将元素推到旁边
    1 年前
    eXor420  ·  如何在脚本标记中使用导出的函数?
    1 年前
    Hadi  ·  如何在无效和有效输入中选择用于更改样式的psoudo元素(after)
    1 年前
    IonicMan  ·  剑道网格在宽度过大时不显示某些列
    1 年前
    Kernier  ·  如何将数学公式支持添加到StacksEditor?
    1 年前
    Md. Ibrahim  ·  CSS网格项溢出小屏幕滚动
    1 年前
    Arjun V Srivatsa  ·  如何将系统时区信息分配给javascript中的变量?
    1 年前
    Akshay mek  ·  Vscode扩展建议不适用于某些文件夹
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号