当浏览器尺寸缩小时,可以通过以下方法来保持站点/图像居中:
.container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
display: grid; place-items: center;
来实现居中。例如:.container {
display: grid;
place-items: center;
}
function centerElement() {
var element = document.getElementById("myElement");
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var elementWidth = element.offsetWidth;
var elementHeight = element.offsetHeight;
var left = (windowWidth - elementWidth) / 2;
var top = (windowHeight - elementHeight) / 2;
element.style.left = left + "px";
element.style.top = top + "px";
}
window.addEventListener("resize", centerElement);
以上是一些常用的方法来保持站点/图像居中。具体使用哪种方法取决于你的需求和项目的具体情况。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云