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

发布网友 发布时间：2022-04-25 16:13

我来回答

共4个回答

热心网友 时间：2022-04-06 14:42

<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要设定高度和宽度

热心网友 时间：2022-04-06 16:00

通常我们用到的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

热心网友 时间：2022-04-06 17:35

margin、padding属性会用吧，
方法有两种：
1：大层设置padding-left以及padding-top两个属性就可以了
2：margin-left、margin-top是对小DIv设置的，
具体设置多少就根据情况来定了

热心网友 时间：2022-04-06 19:26

在css里加上
align:center;
valign:center;