如何水平居中一个元素
2018-06-24 02:17:45来源：未知 阅读 ()
在项目中经常会遇到居中问题，这里借鉴度娘的众多答案，做一个总结：
一、元素的水平居中
1、行级元素的水平居中
<div style="width: 200px;height: 100px;border: 1px solid cyan; text-align: center;"> <span>行级元素水平居中</span> </div>
很明显：子元素为行级元素时，只需要设置父元素 text-align:center 即可。
2、块级元素的水平居中
<div style="width: 200px;height: 100px;border: 1px solid cyan;"> <div style="border: 1px solid indianred;margin: 0 auto; height: 50px;width: 80px;"> 块级元素水平居中对齐 </div> </div>
很明显：子元素为块级元素时，只需要设置父元素 margin: 0 auto; 即可。
3、绝对定位元素的水平居中
html代码
css代码
4、向对定位元素的水平居中
css代码
html代码
这里需要注意的是父元素的宽度是给定的，原理是先让标签元素向右偏移50%，再左移宽度的一半。
5、浮动元素的居中
利用float来定位的元素
css代码
html代码
这种效果类似于第4种：
对于水平居中常见的就这几种，当然还有一些其他的方法可以解决居中问题，比如flex布局、table等。
后续还会补充如何垂直居中一个元素。
第一次写总结，如有疏漏或错误之处，敬请指正！
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
下一篇：初入编程的新世界
- DIV居中的经典方法 2020-06-13
- 如果是自学WEB前端的话，该如何才能找到一份7K实习生工作呢 2020-06-04
- 前端如何学习？ 2020-06-04
- 如何成为一名优秀的web前端工程师 2020-06-02
- 零基础小白转行如何入门学习web前端 2020-06-01
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
