如何让div在不同的屏幕里上下左右都居中？

通常我们用到的css布局都是左右居中，经典css写法如下：
body{   margin:0;      padding:0;      width:100%;      height:100%;  }  div{      margin:0 auto;      width:500px;  

height:auto;  

}  

body{

margin:0;

padding:0;

width:100%;

height:100%;

}

div{

margin:0 auto;

width:500px;

height:auto;

}

上面是经典的左右居中的css写法，那么像登录框那些比较小得div块只是左右居中是否不是太美观，如果上下左右都居中这是
大多数网站的做法，下面是一个比较经典的div上下左右居中的css写法：
body{      margin:0;      padding:0;  width:100%;  

height:100%;  

}  div{     position:absolute;     top:50%;     left:50%;     margin-top:-250px;     margin-left:-250px;      /*此时宽和高都要固定*/      width:500px;     height:500px;  }  body{

margin:0;

padding:0;

width:100%;

height:100%;

}

div{

position:absolute;

top:50%;

left:50%;

margin-top:-250px;

margin-left:-250px;

/*此时宽和高都要固定*/

width:500px;

height:500px;
}
上面的margin可以合并：margin:-250px 0 0 -250px;

大概原理就是：布局需用position，绝对布局absolute还是相对布局relative得看父容器，top，left相对于顶部和左部都相距整个容器的50%，然后在利用margin，向上回退div高的50%即：margin-top:-250px

向左回退div宽的50%即：margin-left:-250px

<style type="text/css">

<!-- 

div {

position:absolute;

top:50%;

left:50%;

margin:-150px 0 0 -200px;

width:400px;

height:300px;

border:1px solid #008800;

}

-->

</style>

<div>让层垂直居中于浏览器窗口</div>

其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写 

注：上面的是一般用于垂直居中与浏览器，想解决div垂直居中与外层div的话，只需要给外层div加上position:relative;就好了；记住，外层div要设定高度和宽度

div在不同的屏幕中上下左右都居中显示，可以用一段代码来写。

宽高可以根据自己的情况来设置，只要设置这个div的margin属性就可以使它居中。

margin：上下距离  左右距离。左右设置auto就是左右居中。至于上下居中，是这个div相对于它外部的div是居中的，可以在外部的那个div的css属性中设置padding（内边距）属性，调整一下距离就行！

如果我的回答对你有用，可以采纳哦！

上下不能设置auto吗

margin后面总共有4个参数。比如：margin:1px 1px 1px 1px。分别表示 上、右、下、左。如果只写2个参数的话，比如：margin：1px 2px，代表 上下都为1px 左右都为2px.
至于居中，margin:0 auto 是标准的写法！

如果我的回答对你有用，可以采纳哦！

采纳了吗？