CSS水平居中总结水平居中总结(新手必看篇新手必看篇)
下面小编就为大家带来一篇CSS水平居中总结(新手必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家
做个参考。一起跟随小编过来看看吧
行内元素行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
html代码：代码：
XML/HTML Code复制内容到剪贴板
1. <body>
2.
3. <div class="txtCenter">我想要在父容器中水平居中显示。</div>
4.
5. </body>
css代码：代码：
CSS Code复制内容到剪贴板
1. <style>
2.
3. .txtCenter{
4.
5. text-align:center;
6.
7. }
8.
9. </style>
块状元素块状元素
定宽块状元素定宽块状元素
定宽块状元素：块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
html代码：代码：
XML/HTML Code复制内容到剪贴板
1. <body>
2.
3. <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
4.
5. </body>
css代码：代码：
CSS Code复制内容到剪贴板
1. <style>
2.
3. div{
4.
5. border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
6.
7. width:200px;/*定宽*/
8.
9. margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
10.
11. }
12.
13. </style>
也可以写成：
资源评论
