Question

我想在中心有一个文本框。我试过下面的代码。但它并没有把它放在中心位置。输出图像也可以在下面找到。请通过在我的代码中指出错误来帮助我。

<html>

<head>

<style>

#form
{
    margin-top:40%;
    margin-left:40%;
}

</style>


</head>

<body>

<div id="form">

    <form method = "post" action = "test.htm" >
    UserName: <input type="text" name = "username" />   
    </form>
</div>

</body>

</html>

上面代码的输出是：

enter image description here

Answer 1

您可以使用以下css代码使文本框水平和垂直居中。

#form {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Answer 2

你走了。

<强> WORKING DEMO

CSS更改：

div#form form {
    background: none repeat scroll 0 0 #808080;
    display: block;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

希望这有帮助。

Answer 3

要垂直和水平居中，请为父元素执行此操作：

position:relative;

然后你想要居住的类/ ID：

position:absolute;
top:0;left:0;bottom:0;right:0;
margin:auto;
/*and make sure this element has a width + height: example:!*/
width:100px;
height:100px;

像这样：Codepen

如何使用css中的margin属性将Div元素放在中心

3 个答案: