修改

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

这是一个简单的解决方案：将表单包装在容器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

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

您需要具有静态表单高度。表单高度：100px是表单的高度。保证金最高需要达到表格高度的50％。

Answer 3

将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>

水平和垂直居中对齐表格

3 个答案:

修改