时间戳

首页 > 解决方案 > 无法让弹性框垂直和水平居中项目

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

问题描述

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

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

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


        height: 100vh;

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

标签： htmlcssflexbox

解决方案

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

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>

推荐阅读