首页前端开发CSS纯CSS实现div水平垂直居中

纯CSS实现div水平垂直居中

时间2024-05-25 16:56:04发布访客分类CSS浏览87
导读:要让一个DIV水平居中,只要设置可div的宽度高度就可以使用margin: 0 auto 来让这个DIV水平居中 那么要如何让div垂直居中显示在页面的中间,这里的前提还是先设置div的宽度还有高度才可以,下面是方法还有代码 首先要...

要让一个DIV水平居中,只要设置可div的宽度高度就可以使用margin: 0 auto 来让这个DIV水平居中

那么要如何让div垂直居中显示在页面的中间,这里的前提还是先设置div的宽度还有高度才可以,下面是方法还有代码

首先要先设置html还有body的宽度和高度为100%

然后给div本身来个相对定位再根据div本身的宽度高度设置外边距

代码如下

这里你也可以使用绝对定位来设置

下面你还可以使用transform属性来进行设置,代码:

当然,如果你想不设置固定的宽度还有高度的,可以用Jquery来实现。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: 纯CSS实现div水平垂直居中
本文地址: https://pptw.com/jishu/667881.html
美国服务器Windows系统Apache服务如何注册或删除 谈谈如何从零开始学习DIV,CSS

游客 回复需填写必要信息