鍍金池/ 問答/HTML5  HTML/ css如何讓頁面元素跟隨屏幕大小等比例縮放并且一直保持垂直居中？

css如何讓頁面元素跟隨屏幕大小等比例縮放并且一直保持垂直居中？

問題描述

想要在頁面的垂直居中位置放一個圖片，圖片上方重疊上一些文字。想要圖片和文字，能夠隨著屏幕大小的改變，能按照比例縮放。

請問有什么好的實現(xiàn)思路？

回答
編輯回答
祈歡

1，圖片以及文字的大小可以用百分比或者rem設(shè)置，就會根據(jù)屏幕大小進(jìn)行縮放。
2，水平垂直居中可參考

2017年5月15日 18:31
編輯回答
久愛她

div內(nèi)部放置你的內(nèi)容

.div {
    position: absolute;
    top:30%;
    right: 30%;
    bottom: 30%;
    left: 30%;
}
2018年5月13日 05:04
編輯回答
故林

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

2017年3月7日 22:06
編輯回答
囍槑
div {
    position: absolute;
    top: 0; bottom:0; left: 0; right:0;
    width: 50%; height: 50%;
    margin: auto;
    background: red;
}

兼容性良好, 樣式簡單

2017年7月7日 22:03
編輯回答
兔囡囡
html, body {
    width: 100%;
    height: 100%;
}
div {
    width: 20%;
    height: 20%;
    margin-top: 50%;
    transform: translateY(-50%);
}
2017年9月8日 12:33