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

问题描述

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

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

阅读 16.8k
5 个回答

div内部放置你的内容

.div {
    position: absolute;
    top:30%;
    right: 30%;
    bottom: 30%;
    left: 30%;
}
html, body {
    width: 100%;
    height: 100%;
}
div {
    width: 20%;
    height: 20%;
    margin-top: 50%;
    transform: translateY(-50%);
}

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

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

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

兼容性良好, 样式简单

推荐问题
宣传栏