怎么实现居中?

来源:9-9 CSS3中设置动画时间外属性

黄太_后

2017-02-27 20:31

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8">

<title>变形与动画</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head> 

<body>


<div class="wrp">

    <div></div>

</div>

</body>

</html>

css代码:

@keyframes redToBlue{

  from{

    background: red;

  }

  20%{

      background:green;

  }

  40%{

      background:lime;

  }

  60%{

      background:yellow;

  }

  to{

    background:blue;

  }

}


.wrp {

   

    width:300px;

    height:300px;

    border:1px dotted black;

}

.wrp div {

   

    

  width: 200px;

  height: 200px;

  background: red;

  margin: 20px auto;

  animation-name:redToBlue;

  animation-duration: 20s;

  animation-timing-function: ease;

  animation-delay: 1s;

  animation-fill-mode: backwards; 

}

请问怎么让中间的色块水平垂直居中啊?


写回答 关注

3回答

  • Qyizos
    2017-03-07 21:14:15
    已采纳

    外面的DIV高度是300,里面的DIV高度是200。(300-200)/2,margin-top:50px;就可以垂直居中了。这个是比较简单的方法。

  • 噼里啪啦稀里哗啦啊啊啊
    2017-03-04 15:01:34

     margin: 20px auto; 上边距20px   水平居中

  • 1274765441
    2017-03-02 15:15:18

    text-align:center;    吧

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242220 学习 · 2623 问题

查看课程

相似问题