Html 屏幕中间的中心形状_Html_Css

Html 屏幕中间的中心形状

html css

Html 屏幕中间的中心形状,html,css,Html,Css,我在屏幕中间找到了一个很酷的中间窗体效果的示例，但由于某些原因，我的窗体出现在中间框的左上角。有人知道如何使窗体居中吗 CSS如下所示： html { display: flex; flex-flow: row nowrap; justify-content: center; align-content: center; align-items: center; height:100%; margin: 0; padding: 0;

我在屏幕中间找到了一个很酷的中间窗体效果的示例，但由于某些原因，我的窗体出现在中间框的左上角。有人知道如何使窗体居中吗

CSS如下所示：

html {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    height:100%;
    margin: 0;
    padding: 0;
    background:#eeeeee;
}

body {
    margin: 0;
    flex: 0 1 auto;
    align-self: auto;
    width: 100%;
    max-width: 900px;
    height: 100%;
    max-height: 600px;
    background:#fafafa;
    -webkit-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 96px 0px rgba(0,0,0,0.75);
}

我用

标签包装了我的表格

你试过这样做吗

.container{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：100vh；
}


我的部门

您可以尝试以下方法：

HTML

：

<body>
    <div class="must-center"></div>
</body>

使用边距：0自动，您可以非常轻松地将其置于屏幕中央；并设置表单标记的宽度。您可以尝试下面的代码

表单{
宽度：100%；
最大宽度：300px；
保证金：50px自动；
背景：#fafafa；
-网络工具包盒阴影：0px 0px 96px 0px rgba（0,0,0,0.75）；
-moz盒阴影：0px 0px 96px 0px rgba（0,0,0,0.75）；
盒影：0px 0px 96px 0px rgba（0,0,0,0.75）；
最小高度：200px；
填充：40px；
}
表单输入{
宽度：100%；
高度：28px；
边缘底部：15px；
填充物：5px；
}


表格中心：

我已经更新了我的答案（也添加了小提琴链接）：）为什么要投否决票？？它很好用。

body{
    position: absolute;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.must-center{
    position:absolute;
    left:0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f90;
    width: 100px;
    height: 100px;
}