<!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;
}
请问怎么让中间的色块水平垂直居中啊？
外面的DIV高度是300,里面的DIV高度是200。(300-200)/2，margin-top：50px；就可以垂直居中了。这个是比较简单的方法。
margin: 20px auto; 上边距20px 水平居中
text-align：center； 吧