如何让div在不同的屏幕里上下左右都居中？
<!--
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要设定高度和宽度
通常我们用到的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在不同的屏幕中上下左右都居中显示，可以用一段代码来写。
html部分：
<div class="box">这个div在不同的屏幕里上下左右都能居中！</div>
css部分：
.box{width:100px;height:100px;margin:0px auto}
宽高可以根据自己的情况来设置，只要设置这个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 是标准的写法！
如果我的回答对你有用，可以采纳哦！
采纳了吗？
