今天在写网页时发现居中是个让人头痛的事，所以我通过网上和自己的用法来总结我目前所知的解决居中问题的办法：
需要在父元素上设定,只能是文字或行内元素而且不能是浮动元素
.div1{ text-align: center; }<div class="div1"> <span>text-alignf</span></div>
需要在子元素上设定，只能是块级元素而且不能是浮动元素
.div2 div{ margin: 0 auto; }<div class="div2"> <div> <p>margin</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div></div>需要在父元素上设定,只能是文字和行内元素
.div3{ line-height: 200px; }<div class="div3"> <span>line-height</span></div>首先给父元素和子元素分别写上positon定位，再给父元素和子元素设定宽高，
然后给子元素再写上top:50%;left:50%;以及margin-top:一半的height值的的负数;
margin-left:一半的weight值的负数。（原理是先把子元素定位在父元素宽高的50%上，再减去子元素宽高的
一半）
.div4{ position:relative; } .div4 div{ /*float: left;*/ width:100px; height:80px; position:absolute; top:50%;left:50%; margin-left:-50px; margin-top:-40px }<div class="div4"> <div> <p> position </p> </div></div>父元素设定text-align:center，其下元素设定display: inline-block可以进行居中（让其对父元素是行内元素，对自身是块级元素）
.div5{ text-align: center; } .div5 div{ display: inline-block; }<div class="div5"> <div> <p> inline-block </p> </div></div>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
298
