设置网页上下左右都居中的办法

最新推荐文章于 2022-06-05 16:40:45 发布

daughter_wall

最新推荐文章于 2022-06-05 16:40:45 发布

阅读量1k

点赞数

文章标签： Web CSS

本文链接：https://blog.csdn.net/daughter_wall/article/details/83976140

版权

我开始以为上下居中不可能，在网上搜索良久，才知道凡事都有可能哦，不说废话，看代码

如果只设置网页左右居中的话，直接设置div的margin属性为：distance-top auto;即可设置水品居中。

垂直居中的方法：我只找到一种增添空元素的方法，代码如下：

position:absolute;                //你想要居中显示的那些内容就放在这个块儿里，用绝对定位设置上和左的距离
top:50%;                              //即距离该div上方是（-居中内容的高度的一半），距离左方是（-居中内容的宽度的一半）
left:50%;
}
#content{
position:absolute;
padding:0px;
width:400px;
height:1500px;
margin:-750px -200px;          //设置距离上个div块儿的距离，是负值，因为上一个div的起点正好是中间，咱就让你要居中显示的
background-color:#9F0;       //内容中心正好在上个div的起点就好了
}
-->
</style>
</head>

<body>
<div id="outer">
<div id="inter">
<div id="content">
</div>
</div>
</div>
</body>