未知高度多行文本垂直居中

Posted 2020-09-06

方法一，使用display：inline-block+伪元素

<div class="mask">
        <div class="dialog">
               未知宽高元素窗口水平垂直居中(拖动右下角改变宽高)"
        </div>
    </div>

.mask{
    position: fixed;
    left: 0;
    top:0;
    height: 100%;
    width: 100%;
    text-align: center;
    background-color: rgba(200, 200, 200, .2);
  
}

.mask:after{
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.dialog{
    display: inline-block;
    border: 3px solid lightblue;
}

方法2： 使用display：table-cell

.parent {
      width: 100px;
      height: 150px;
      display: table;
      background: #f66;


    }

    .child{
      display: table-cell;
      vertical-align: middle;
      
    }