Question

我试图将div放在页面中心并为其设置动画，但是

transform:translate(-50%, -50%)

根本不起作用，所以它只依赖于默认的

top: 50%; left: 50%

这是我的HTML代码：

<html>
<head>  
    <link href="http://www.exaltedweb.com/refs/animate.css" rel="stylesheet" type="text/css"/>
    <link href="stylesheets/admin2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <div id="container">
        <div class="modal-wrapper" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; display:block;">
            <div class="modal-background" style=""></div>
            <div class="modal-content animated bounceIn"></div>
        </div>
    </div>
</body>

这是我的CSS：

#container{
    width: 100%;
    height: 100%;
}

.modal-wrapper{
    position: absolute; 
    width: 100%; 
    height: 100%;
}

.modal-background{
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.5); 
    display:block;
}

.modal-content{
    top: 50%; 
    left: 50%; 
    position: absolute; 
    transform: translate(-50%, -50%); 
    width: 100px; 
    height: 100px; 
    background-color: blue;
}

我尝试了很多像display：block;以及我在网上找到的一堆其他方法，但这些方法都没有。任何有关这方面的帮助都会非常感激，因为我已经在这个问题上坚持了一整天。提前谢谢！

Answer 1

检查这个jsfiddle＆＃34; jsfiddle.net/SolaceInfotech/7sj2ma2m/3 /"在页面中心设置html元素。在#container {}

中更改高度

如果要将元素设置为特定块大小的中心。否则，将其设置为100％，这样您的块将显示在整页的中心。

它在Chrome，Opera和Firefox中经过测试，可以正常使用这些浏览器。

Answer 2

animate.css中的动画类包含转换语句，它们会覆盖您用来居中div的那些语句。使用包装器div，它是容器的整个宽度和高度，并将动画类应用于包装器。

<div id="container">
  <div class="wrapper animated slideInDown">
    <div id="target" class="box " id="bluebox">
      <p>DIV #1</p>
    </div>
  </div>
</div>

http://jsfiddle.net/1pveopct/

无法使用Animate.CSS或其他动画库将动画div居中

2 个答案: