鍍金池/ 問(wèn)答/HTML5  HTML/ css 如何解決transform：translate超出屏幕范圍

css 如何解決transform：translate超出屏幕范圍

我有一個(gè)高700的div，要居中，我采用transform：translate（-50%，-50%），但發(fā)現(xiàn)如果屏幕高度小于700的時(shí)候，會(huì)只展示中間部分，上部分看不到，也移動(dòng)不了。
如何解決這個(gè)問(wèn)題或者還有沒(méi)有其他居中方法可以解決這個(gè)問(wèn)題

補(bǔ)充：我是絕對(duì)定位，對(duì)屏幕居中的，是一個(gè)dialog框

回答
編輯回答
呆萌傻

使用css的calc計(jì)算函數(shù)以及vw/vh視窗單位

.dialog{
    position:absolute;
    left:calc(50vw - 350px);
    top:calc(50vh - 250px);
    width:700px;
    height:500px;

}

當(dāng)然你也可以通過(guò)JS獲取當(dāng)前視窗可是區(qū)域的大小，動(dòng)態(tài)設(shè)置left/top值

2018年3月29日 01:37
編輯回答
維他命

我感覺(jué)啊
一、可以用媒體查詢(xún)的方式，屏幕小于700的時(shí)候，div也縮小
二、還是用transform的scale縮放

2017年3月18日 16:25
編輯回答
雨萌萌

給你div設(shè)置

max-height: xx%;
overflow: auto;
2017年1月13日 05:28