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

Question

这是我的模态框定义样式的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

Answer 1

需要居中的元素：

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

父元素：

position:relative;

Answer 2

position absolute
left 50%
top 50%
margin-left -50%
margin-top -50%
按你写的是这种合适咯当然。
但是一般来说你是不知道大小的。所有
position absolute
left 50%
top 50%
transform: translate(-50%,-50%);
上面这种呢，不适合不支持transform
然后你就可以用table。
或者可以给里面设置left:-50%；top:-50%

这个网站里面有各种居中的方法我就不给你粘了 https://segmentfault.com/a/11...

Answer 3

.modal-dialog
    position absolute
    left 50%
    top 50%
    min-width 50%
    min-height 20%
    transform translate(-50%,-50%)
    box-shadow 1px 2px 8px rgba(255, 255, 255, .5)
    border-radius .4rem
    background #fff
    overflow auto

大概是这么样，没用过stylus不知道写对没。
还有也可以试试flex布局，
要不直接javascript算。

给你几个连接：https://segmentfault.com/q/10...
http://www.runoob.com/cssref/...