问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

absolute元素不定高度不使用translate如何垂直居中？

头像
张巨侠
    51112175298
    <div :class="['game-model', modelShow ? 'show' : '']" @click="closeModel">
   <div :class="['game-model-main', 'animated', modelStatus === 1 ? 'bounceInDown' : 'bounceOutUp']">
    ...//有很多不同类型的弹窗
   </div>
  <div :class="['game-model-main', 'animated', modelStatus === 2 ? 'bounceInDown' : 'bounceOutUp']">
    ...//有很多不同类型的弹窗
   </div>
<div :class="['game-model-main', 'animated', modelStatus === 3 ? 'bounceInDown' : 'bounceOutUp']">
    ...//有很多不同类型的弹窗
   </div>
</div>

.game-model{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.8);
  opacity: 0;
  transition: 0.75s;
  z-index: -1;
  &.show{
    opacity: 1;
    z-index: 9;
  }
  .game-model-main{
    position: absolute;
    width: 575px;
    background-color: #fff;
    padding: 24px;
    box-sizing: border-box;
    top: 50%;
    left: 8rpx;
    // transform: translate3d(0, -100%, 0);
    z-index: 10;
  }
}

    一个弹窗组件，.game-model-main使用css3的动画显示，所以设置translate会冲突，无法实现效果。
    absolute元素不定高度不使用translate如何垂直居中？

    css
    阅读 2.6k
    1 个回答
    得票最新
    头像
    waterDoge
      1.3k3612
      ✓ 已被采纳

      可以参考以下这个：https://segmentfault.com/q/10...

      flex布局兼容性：http://caniuse.com/#feat=flexbox

      flex布局示例

      <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<style type="text/css">
body {
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
div {
  position: absolute;
  width: 200px;
  background:#ccc;
  overflow-wrap: break-word;
  opacity: .5;
}
</style>
</head>
<body>
    <div>aaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>

      以下不适用子元素高度不定的情况

      设置top:0;bottom:0;然后margin:auto;。

      示例

      <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<style type="text/css">
body {
  height: 100vh;
  position: relative;
}
div {
  position: absolute;
  top:0;
  bottom:0;
  width:600px;
  height:400px;
  margin:auto;
  background:#ccc
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

      如果动画的CSS可以修改的话给动画加个translate偏移量来修正也是可以的

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题