如何实现div的上下左右都居中?

Posted 2023-04-21

把 绿色那个div 上下页居中

<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要设定高度和宽度 参考技术A 通常我们用到的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 参考技术B margin、padding属性会用吧，
方法有两种：
1：大层设置padding-left以及padding-top两个属性就可以了
2：margin-left、margin-top是对小DIv设置的，
具体设置多少就根据情况来定了追问

没那么简单，要的是自动上下居中，要自适应不同的显示器分辨率的！

追答

按百分比居中不就可以了吗

追问

不行，可以的话早就解决咯。

参考技术C 在css里加上
align:center;
valign:center;

分隔线+文字居中的css效果如果实现？

如图所示的效果，最好能自适应宽度

分割线放在下面，再用一个div将文字包起来，该div背景设为白色，居中即可。追问

顺手写一个吧，小白不太懂。div和div之间不是会隔开吗？
分隔线是用加粗、黑border 还是 ？

追答

动手简单做了个，应该不难理解，线条用什么都可以。

参考技术A 用一张背景图做