css:margin:100px auto；居中效果不起作用(附元素显示模式总结)

如果该元素是:display:inline-block;那么margin:100px auto;不会有居中效果。

首先复习一下block、inline、inline-block的区别

• block
  • 块元素，如div
  • 独占一行，下一个元素另起一行
  • 可以设置宽度和高度，默认情况下宽度是父级元素的宽度，如果设置更小的宽度，依然独占一行
  • 可以设置margin和padding
  • 是一个容器盒子，里面可以放行内元素和块级元素
• inline
  • 行内元素，如span
  • 在一行中可以有多个行内元素，直到该行放不下了，再另起一行
  • 不能设置宽度和高度，默认宽度根据本身内容决定
  • 可以设置左右的内外边距，不能设置上下的内外边距
  • 行内元素只能容纳文本和其他行内元素
• inline-block
  • 行内块元素
  • 我们想放在行内，又想设置宽高和内外边距，怎么办呢？于是出现了行内块元素。具有block和inline的特点
  • 一行显示多个（inline）
  • 可以设置宽高和内外边距（block），默认宽度是本身内容的宽度（inline）

所以，如果元素是inline-block或inline 他们默认宽度已经固定了，不是独占一行的，那么左右外边距为auto，是没有办法自动调整为居中的，应该要为block