关于display:inline-block 元素，设置margin: 0 auto; 没有居中效果问题

Question

遇到一个inline-block元素，想让其居中显（span元素水平居中在div中）示，设置margin: 0 auto;也设置了宽度，但没有效果，如果把元素改为block，确可以居中显示，不知是什么原因？

html结构
<div class="closearea">
<span class="close">close</span>
</div>

css样式（scss语法）:
//关闭按钮

.closearea {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #e84f41;
  .close {
    font-size: 0px;
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid red;
    background-color: #1be8b2;
    margin: 0 auto;//display: inline-block;时不起作用，但是block时起作用 ???
  }
}

Answer 1

inline-block是将元素转换为行内元素，所以你在设置margin: 0 auto 也是无用。
现在布局用的比较多的是flex，
推荐一篇文章：http://www.ruanyifeng.com/blo...

Answer 2

父元素 text-align: center

之后关于auto，看这

Answer 3

inline-block 是内联块，既然是内联你想居中肯定不是用外边距自动计算的方式来居中，其实这是一个很简单的CSS样式问题，内联就像是一个文本一个，你想让文本居中，就用 text-align: center; 就行了。

.closearea {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #e84f41;
text-align: center;
  .close {
    font-size: 0px;
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid red;
    background-color: #1be8b2;
    // margin: 0 auto;//display: inline-block;时不起作用，但是block时起作用 ???
  }
}

Answer 4

谢谢各位的指点， 得加强基础知识的学习。当初写的时候，只考虑了既然inline-block元素也具有block元素的特征，那么margin：auto；应该也适用。