怎么實現居中？
<!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;?
}
請問怎么讓中間的色塊水平垂直居中??？
2017-03-07
外面的DIV高度是300,里面的DIV高度是200。(300-200)/2，margin-top：50px；就可以垂直居中了。這個是比較簡單的方法。
2017-03-04
?margin: 20px auto; 上邊距20px ? 水平居中
2017-03-02
text-align：center； ? ?吧