H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

问题描述

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

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

回答:

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;
}

兼容性良好, 样式简单

本文地址:H5W3 » 【Web前端问题】css如何让页面元素跟随屏幕大小等比例缩放并且一直保持垂直居中?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址