Question

我在屏幕中间找到了一个居中显示酷效果的示例，但由于某种原因，我的表单出现在中心框的左上方。有谁知道如何使表格居中？

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);
}

我将表单包裹在<body>标签中

Answer 1

您尝试这样做吗？

.container{
  display:flex;
   justify-content:center;
   align-items:center;
   height:100vh;
}

<div class="container">
  <div class="Centerdive">
  My Div
  </div>
</div>

Answer 2

您可以尝试以下方法：

HTML：

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

css：

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;
}

Try it online

Answer 3

您可以使用margin使其非常容易地位于屏幕中央：0 auto;并设置表单标签的宽度。您可以尝试下面的代码

form {
  width: 100%;
  max-width: 300px;
  margin: 50px auto;
  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);
  min-height: 200px;
  padding: 40px;
}

form input {
  width: 100%;
  height: 28px;
  margin-bottom: 15px;
  padding: 5px;
}

<form>
  <h2>Form Center:</h2>
   <input type="text" placeholder="Test input">
   <input type="text" placeholder="Test input 2">
</form>

屏幕中间的中心表格

3 个答案: