本文主要和大家分享css实现p居中的方法，css代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下，希望能帮助到大家。
下面给大家分享p居中的实现代码，具体代码如下所示：
demo .p1{ width: 100px; height: 100px; border: 1px solid #000000;} .p2{ width:40px ; height: 40px; background-color: green;}
登录后复制
如上的两个p，实现p2在p1里面是居中显示
一、方法一
立即学习“前端免费学习笔记（深入）”；
利用margin，p1的宽减去p2的宽就是p2margin-left的数值：（100-40）/2=30
p1的高减去p2的高就是p2margin-top的数值：（100-40）/2=30
demo .p1{ width: 100px; height: 100px; border: 1px solid #000000;} .p2{ width:40px ; height: 40px; background-color: green;} .p22{ margin-left: 30px;margin-top: 30px; }
登录后复制
二、方法二
利用css的 position属性，把p2相对于p1的top、left都设置为50%，然后再用margin-top设置为p2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置
demo .p1{ width: 100px; height: 100px; border: 1px solid #000000;} .p2{ width:40px ; height: 40px; background-color: green;} .p11{ position: relative; } .p22{ position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px; }
登录后复制
三、方法三
还是用css的position属性，如下的html
demo .p1{ width: 100px; height: 100px; border: 1px solid #000000;} .p2{ width:40px ; height: 40px; background-color: green;} .p11{ position: relative; } .p22{ position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0; }
登录后复制
四、方法四
利用css3的新增属性table-cell
demo .p1{ width: 100px; height: 100px; border: 1px solid #000000;} .p2{ width:40px ; height: 40px; background-color: green;} .p11{ display: table-cell;vertical-align: middle; } .p22{ margin: auto; }
登录后复制
这个方法还有一个好处就是，p2的高度可以不固定，如下
demo .p1{ width: 100px; height: 100px; border: 1px solid #000000;} .p2{ width:40px ; background-color: green;} .p11{ display: table-cell;vertical-align: middle; } .p22{ margin: auto; }
p居中方法
登录后复制
相关推荐：
html里div居中需要注意哪些
html里div居中需要注意哪些
html里div居中需要注意哪些
以上就是三种css方法实现DIV居中的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2900270.html
