如何在css设置div在屏幕中央

Posted 2023-05-01

<div id="authorization_box" >

<div id="auth_confirm" >

<p>验证身份</p>

<form action="security.php?action=auth_confirm" method="POST">

<input type="password" name="pass_input" placeholder="placeholdervalue" min="4" max="16" autofocus="autofocus" />

</form>

</div>

</div>

css代码：

<style>
div#authorization_box,div#auth_confirm 
marguin:0 auto;
overflow:hidden;

div#authorization_box 
position:fixed;
z-index:9999;
top:50%;
left:50%;
width:250px; /* 按需改变数值 */
height:150px; /* 按需改变数值 */
margin-top:-75px; /* height数值的一半 */
margin-left:-125px; /* width数值的一半 */
-webkit-box-shadow:0 0 3px rgba(0,0,0,.2);
-moz-box-shadow:0 0 3px rgba(0,0,0,.2);
box-shadow:0 0 3px rgba(0,0,0,.2);
background:#fff;
padding:10px;

</style>

Html代码：（跟你发的一样）

<div id="authorization_box"  >
 <div id="auth_confirm" >
  <p>验证身份</p>
  <form action="security.php?action=auth_confirm" method="POST">
   <input type="password" name="pass_input" placeholder="placeholdervalue" min="4" max="16" autofocus="autofocus" />
  </form>
 </div>
</div>

仅供参考，希望对你有帮助。

参考技术A 一般要先设置DIV的宽度，IE浏览器下BODY直接用css的text-align=“center”，firfox是设置div的css：margin：0, auto.
在IE，text-align是对所有元素居中，而在firfox中的text-align只对文本元素居中，所以要DIV居中，firfox用margin：0 auto； 参考技术B #div
marign:auto;

这个div就会居中显示了

auto是自动调整大小的，左右边距相同，就是居中了

参考技术C 居中没问题，上下用定位，用js也行！ 参考技术D margin:0px auto 0px auto;
width:960px;

css 怎么让div的宽度和屏幕宽度一样

参考技术A 设置
div的宽度为100%；这样屏幕缩放的时候div也会跟着缩放
当然你要设置所有的区域以及图片的宽度都为百分比，比如有一个宽度为800px，而你屏幕缩放的时候到700px的时候，就会隐藏掉超出的那部分，在浏览器下面会出现一个横条拖动；
不论图片还是区域都要如此设置，如果只是某一个区域或者设置某张图片的话，只要设置这一个区域就可以了；
有疑问，追问我；