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

最新推荐文章于 2021-11-15 23:04:33 发布

daughter_wall

最新推荐文章于 2021-11-15 23:04:33 发布

阅读量1k

点赞数

文章标签： Web CSS

本文链接：https://blog.youkuaiyun.com/daughter_wall/article/details/83976140

版权

本文介绍了一种实现网页内容水平及垂直居中的方法。通过使用嵌套div，并结合CSS绝对定位，可以轻松实现内容在页面上的居中显示。文中提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

如果只设置网页左右居中的话，直接设置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>