css - 制作了一个模态框，大小不固定，不知道怎么水平垂直居中显示？请指教

问题描述

问 题

这是我的模态框定义样式的stylus的代码，想知道怎么让大小不固定的模态框显示在中央，而且屏幕缩放的时候仍然居中

<div class="modal-dialog-wrapper">
  <div class="modal-dialog"></div>
</div>

.modal-dialog-wrapper
  position fixed
  top 0
  right 0
  bottom 0
  left 0
  z-index 999999
  display none
  &.open
    display block
  &:before
    content ''
    display block
    width 100%
    height 100%
    background-color rgba(0, 0, 0, .5)
  .modal-dialog
    position absolute
    left 50%
    top 50%
    min-width 50%
    min-height 20%
    margin-left -30%
    margin-top -10%
    box-shadow 1px 2px 8px rgba(255, 255, 255, .5)
    border-radius .4rem
    background #fff
    overflow auto

解决方案

需要居中的元素：

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

父元素：

position:relative;

这篇关于css - 制作了一个模态框，大小不固定，不知道怎么水平垂直居中显示？请指教的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！