水平和垂直居中表格

Question

我找了大约半天的解决方案。我刚刚开始网页设计，我需要将表单水平和垂直居中。现在它位于左上角。请不要介意我会尽快整理它的错误代码。

form {
 
    display: table-cell;
   text-align: center;
   vertical-align: middle;
    
}


.trans {
    
    background:rgba(1,1,1,0.6);
    
}

body {
    
  background-image: url(wallpaper.jpg);     
    
}

.text {
    

    
}

.box {
    
    display: table;
    width: 100%;
    
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png">
        <title>Peq Anon</title>
        
    </head>
    
    <body>

        <div class="container">
            <form>
                <input class="trans text" type="text" name="Password">
                <button type="submit" onclick="#">Submit</button>    
            </form>    
        </div>
        
        
        
    </body>
</html>

Answer 1

水平居中使用margin:auto 使用 top:50% 和 position:relative 进行垂直对齐。不要忘记为容器定义一个 height 并使其位置也为 relative。

 form {
    margin: auto
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position:relative;
    top: 50%;
    
    }
    .container{
    position.relative;
    height:200px;}
    
    
    .trans {
    
    background:rgba(1,1,1,0.6);
    
    }
    
    body {
    
    background-image: url(wallpaper.jpg);     
    
    }
    
    
    
    .box {
    
    display: table;
    width: 100%;
    
    }

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png">
        <title>Peq Anon</title>

    </head>

    <body>

        <div class="container">
            <form id="form">
                <input class="trans text" type="text" name="Password">
                <button type="submit" onclick="#">Submit</button>    
            </form>    
        </div>



    </body>
</html>

Answer 2

.container {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 0;
    width: 100%;
}

form {
    text-align: center;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    height: 100px;
}

不过您需要有一个静态的表单高度。表格 height:100px 是表格的高度。 margin-top 需要是表单高度的 50%。

Answer 3

这是一个简单的解决方案：将表单包装在容器中 div 并使用 display: flex 属性设置对齐方式。

试试这个：

<div class="container">
<!-- the rest of your code comes here -->
</div>

而对于 CSS

.container {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center; /* center vertically */
}

编辑

您必须确保 body、html 和 container 元素的高度都设置为 100%。

看这个 fiddle 的例子：Fiddle

水平和垂直居中表格

Centering a form horizontally and vertically

html

css

forms

center

编辑