如何将HTML矩形框放置在页面中心
我有两个问题，如下所述：- 1我想将包含用户名和密码文本字段的蓝色矩形框移动到页面中心。我尝试使用更改矩形框的位置，但奇怪的是，它根本不移动。HTML中是否有任何参数可以帮助我将此框移动到页面中心？谁能建议我怎样才能做到这一点 2 BORDER=8参数不起作用，因为我想在矩形框周围设置一个深黑色边框。有人能提出这个问题的原因吗 要复制我面临的问题，请将以下代码复制到.TXT文件中，并将其另存为.HTML文件。在IE或Firefox浏览器中打开查看我遇到的问题 代码：如何将HTML矩形框放置在页面中心,html,css,Html,Css,我有两个问题，如下所述：- 1我想将包含用户名和密码文本字段的蓝色矩形框移动到页面中心。我尝试使用更改矩形框的位置，但奇怪的是，它根本不移动。HTML中是否有任何参数可以帮助我将此框移动到页面中心？谁能建议我怎样才能做到这一点 2 BORDER=8参数不起作用，因为我想在矩形框周围设置一个深黑色边框。有人能提出这个问题的原因吗 要复制我面临的问题，请将以下代码复制到.TXT文件中，并将其另存为.HTML文件。在IE或Firefox浏览器中打开查看我遇到的问题 代码： 虽然这不是一个js问题： &
虽然这不是一个js问题：
<div style="position: absolute; left: 50%; margin-left: 225px; width: 450px; height: 250px; background: blue; border: 8px solid black"> content </div>
如果您想要真正的动态定位，请使用以下不依赖于指定尺寸的选项。关键的是，它使用CSS表格布局来进行位置计算。给你的表单一个边框可以实现边框：8px纯黑 您还应该将样式从内联指定中移出，并使用CSS来控制布局，而不是依赖于大量HTML，例如 HTML
如果您只想水平居中，请尝试使用：margin:0 auto 用它来定位元素是不好的。也不是一种干净的方式。您需要添加边距：0自动；到你的蓝盒子
看看这个我建议多用CSS，少用and
尝试使用边距来获得正确的位置。请提供一个演示页面，说明所有答案都是正确的。非常感谢大家！！这很有帮助
<div style="position: absolute; left: 50%; margin-left: 225px; width: 450px; height: 250px; background: blue; border: 8px solid black"> content </div>
<div class='table'>
<div class='cell'>
<form id="login" action="index.html">
<label>Username:</label>
<input type="text" name="userid" size="18" maxlength="18" />
<br />
<label>Password :</label>
<input type="password" name="pswrd" size="18" maxlength="18" />
<br />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
</div>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
label {
font-weight:bold;
margin-right:10px;
}
.table {
display:table;
text-align:center;
width:100%;
height:100%;
table-layout:fixed;
}
.cell {
display:table-cell;
vertical-align:middle;
}
form {
display:inline-block;
border:8px solid black;
width: 450px;
padding:50px 0;
background: blue;
}
input {
margin-bottom:15px;
}
<div style="width: 450px; height: 250px; background: blue;margin:0 auto;">
<form id="login" action="index.html">
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18" />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
<div style="border-width:8px;border-color:red;border-style:solid;width:450px;height:1050px;background-color:gold;"> content </div>
` <html>
<style>
#login {
left: 50%;
width: 200px;
margin-left: -225px;
position: relative;
}
div {
width: 450px;
height: 250px;
background: blue;
border:8px solid #000;
padding:20px;
}
</style>
<form id="login" action="index.html">
<div>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/><br>
<input type="submit" value="Submit"><br>
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</div>
</form>
</html>`