CSS Animate问题

时间：2018-03-01 21:04:34

标签： html css zoom css-animations

自从我在下面的代码中将“position absoulte”添加到我的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>

2 个答案:

答案 0 :(得分：0)

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

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

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

以下是完整代码：

＆＃13;
＆＃13; 
* {
  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 
       */
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

顺便说一句，考虑另一种方式比定位元素居中更好。你可以使用flex来实现它，因为你已经在使用它了：

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

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

以下是完整代码：

＆＃13;
＆＃13; 
* {
  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 
       */
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

有一些问题。在.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>
ItemDataSource.sharedInstance.items[indexPath.row].price!

相关问题
最新问题