无法让弹性框垂直和水平居中项目

Question

所以我正在为一个朋友设置一个非常基本的登陆页面。 我已经几年没有开发网站了，而且我非常脱节。 已经搜索了很长时间，但似乎没有任何效果。 试图在页面中间获得一个基本的 png 图像。

我试过使用 flexbox - justify-content: center; align-items: center; justify-content: center; align-items: center; - 不能让它工作。 我试过回到旧的表格单元格，但没有用。 我什至尝试使用设置边距顶部进行边距自动，但这不够响应。

        display: flex;
        justify-content: center;
        align-items: center;


        height: 100vh;

希望项目居中但它只水平居中而不是垂直居中。 页面在这里供参考 www.shoeshoe.co/

Answer 1

您的设置是正确的 - 您只需要将其放入正确的上下文中：

 html, body { margin: 0; } .wrap { box-sizing: border-box; height: 100vh; border: 1px solid green; display: flex; justify-content: center; align-items: center; }

 <div class="wrap"> <img src="https://placehold.it/50x50/fa0"> </div>