为了账号安全,请及时绑定邮箱和手机立即绑定

怎么实现居中?

<!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 回答

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

0 回复 有任何疑惑可以回复我~

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

0 回复 有任何疑惑可以回复我~

text-align:center;    吧

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

怎么实现居中?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信