方法一,使用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; }