可以将正方形拟合并居中div在视口中并始终保持它的根据宽度和高度的长宽比?
要求 ：
Example:
保持纵横比div根据宽度和高度，您可以使用aspect-ratio财产 （MDN 参考).
这允许您根据视口大小保持任何纵横比or到父元素的大小。
根据视口大小（宽度和高度）保持纵横比：
.ar-1-1 {
aspect-ratio: 1 / 1;
background: orange;
}
.ar-1-19 {
aspect-ratio: 16 / 9;
background: pink;
}
div {
max-width: 100vw;
max-height: 100vh;
margin-bottom: 5vh;
}
/** For the demo **/
body {
margin: 0;
}<div class="ar-1-1">Aspect ratio 1:1</div>
<div class="ar-1-19">Aspect ratio 1:19</div>根据父元素大小（宽度和高度）保持纵横比：
section {
width: 50%;
margin: 0 auto 5vh;
height:250px;
}
.ar-1-1 {
aspect-ratio: 1 / 1;
background: orange;
}
.ar-1-19 {
aspect-ratio: 16 / 9;
background: pink;
}
div {
max-width: 100%;
max-height: 100%;
}
/** For the demo **/
body {
margin: 0;
}<section>
<div class="ar-1-1">Aspect ratio 1:1</div>
</section>
<section>
<div class="ar-1-19">Aspect ratio 1:19</div>
</section>这仍然可以正常工作，但它不允许根据父元素大小保持纵横比。
根据宽度和高度保持 div 的纵横比在视口中，您可以使用一个 HTML 标签：
vmin 1/100th of the minimum value between the height and the width of the viewport.
(source : MDN)
position: absolute and margin: auto;用于居中DEMO（调整窗口高度和宽度的大小以查看其实际效果）
vminIE10+ 支持的单位（canIuse）对于 IE9 支持，您需要使用后备vm单位而不是vmin像这样 ：
width: 100vm; /* <-- for IE9 */
height: 100vm; /* <-- for IE9 */
width: 100vmin;
height: 100vmin;
body {
margin:0; /* To prevent scrollbars */
}
div{
/* Aspect ratio */
height:100vm; width:100vm; /* IE9 fallback */
width: 100vmin;
height: 100vmin;
/*Centering */
position: absolute;
top:0;bottom:0;
left:0;right:0;
margin: auto;
/* styling */
background: gold;
}<div>whatever content you wish</div>