javascript - 如何在屏幕的正中心制作响应式图像并在所有边上制作相等的边距？

Question

有人知道怎么做吗？我已经尝试了一段时间，但无法让它在底部边缘工作。这个时尚(？)网站展示了我的意思: http://vyctoire.com/

它是响应式的，因此在任何时候(直到移动尺寸)，边距都是相等的。您知道使用 html 和 css 执行此操作的方法吗？甚至也可以使用 jquery。

Answer 1

Flexbox 有 align-items: center; 和 justify-content: center; 我不会像我的代码片段中那样建议使用它，它只是一个示例向您展示它的外观。

body {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.faux-image {
  width: 25vw;
  height: 25vh;
  background: tomato;
}

<div class="faux-image"></div>