如何仅使用CSS实现div垂直水平居中同时长宽保持比例

Question

HTML如下：

<div class='container'>
    <div class='center'>
    </div>
</div>

需求：

1. .center垂直水平居中于整个页面

2. .center宽度最大为500px，窗口小于500px时，.center宽度为100%

3. .center的高度始终为宽度的2/3

虽然有垂直水平居中和长宽比的教程，但是两个合在一起好像总有问题。

请问用CSS如何实现该效果？谢谢。

Answer 1

屏幕尺寸大于500px时，container设置为500*333的box，用position：absolute加transform的居中方法，center的高度采用padding-top继承自父元素width来设置。
屏幕尺寸小于500px时，container高宽均设置为100%，center还是采用padding-top方法，此时将center的position属性设置为absolute，因为宽度为100%，高度为0，此时只需要top：50%；translateY(-50%)即可。