text-align:center与margin:0 auto居中区别_CSS学习

资料来源：网络整理时间：2023/3/4 0:56:39 共计：3613 浏览

这两种方式都可以在一定条件下实现居中效果，那么如何进行区分呢？

1、先说text-align:center使行内元素居中条件：

text-align:center，水平居中是通过给父元素设置 text-align:center 来实现行内元素居中，比如行内的文字，行内的图片（非块状元素）

比如：

html代码：

<body>
  <div class="txtCenter"><img src="#"></div>
</body>

css代码：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

2、再说margin:0 auto使块状元素居中（必须定宽）：

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：

html代码：

div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:300px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}


<div>我要水平居中显示。</div>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：text-align:center与display:inline组合块居中，多个行内元素/块状元素居中方法_CSS学习 | ·下一条：CSS 长度值 px（像素）、em、% 百分比_CSS学习