css如何让页面元素跟随屏幕大小等比例缩放并且一直保持垂直居中？

Question

问题描述

想要在页面的垂直居中位置放一个图片，图片上方重叠上一些文字。想要图片和文字，能够随着屏幕大小的改变，能按照比例缩放。

请问有什么好的实现思路？

Answer 1

div内部放置你的内容

.div {
    position: absolute;
    top:30%;
    right: 30%;
    bottom: 30%;
    left: 30%;
}

Answer 2

html, body {
    width: 100%;
    height: 100%;
}
div {
    width: 20%;
    height: 20%;
    margin-top: 50%;
    transform: translateY(-50%);
}

Answer 3

1，图片以及文字的大小可以用百分比或者rem设置，就会根据屏幕大小进行缩放。
2，水平垂直居中可参考

Answer 4

父容器 display:flex;justify-content:center;align-content:center;

Answer 5

div {
    position: absolute;
    top: 0; bottom:0; left: 0; right:0;
    width: 50%; height: 50%;
    margin: auto;
    background: red;
}

兼容性良好, 样式简单