Html 如何在css中使用margin属性将Div元素放在中间_Html_Css

Html 如何在css中使用margin属性将Div元素放在中间

html css

Html 如何在css中使用margin属性将Div元素放在中间,html,css,Html,Css,我想在中间有一个文本框。我尝试了下面的代码。但它并没有把它放在中心位置。输出的图像也可以在下面找到。请帮我指出代码中的错误 <html> <head> <style> #form { margin-top:40%; margin-left:40%; } </style> </head> <body> <div id="form"> <form method = "p

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

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


#形式
{
利润率最高：40%；
左缘：40%；
}
用户名：

以上代码的输出是：

给你

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

希望这有帮助。

要使其垂直和水平居中，请对父元素执行以下操作：

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;

如下所示：

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

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

对答案已编辑。-@CTravelI只是想利用保证金资产。这是不可能的。为什么50%的利润率没有达到中心？但是50%的利润率是什么？？您需要有一个嵌套的父亲戚，它可以将页边距绑定到页面的50%。那将是完全不同的解决方案@请在下面检查我的答案@阿比纳夫