CSS 垂直对齐 div，同时保持纵横比

Question

我在 jsfiddle.net/5tzk3/10 使用了 JsFiddle .我将其更改为将 div 显示为方形对话框(水平和垂直居中)。结果在jsfiddle.net/5tzk3/548 .

如您所见，水平居中很容易，但我无法将其垂直居中。谁知道如何使用纯 CSS 做到这一点？

编辑代码如下:

<div class="blind">
    <div class="wrapper">
        <div class="main">
            I'm your div with an aspect-ratio of 1:1!
        </div>
    </div>
</div>

html, body, .blind {
    height: 100%;
    width: 100%;    
}

.blind {
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
}

.wrapper {
    display: inline-block;
    margin: auto;
    position: relative;
    width: 50%;
}

.wrapper:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.main {
    background-color: rgb(0, 162, 232);
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0; 
}

Answer 1

使用display:table作为父div，display:table-cell; vertical-align: middle 用于要垂直居中的内容 div。