在markdown语法的插入图片功能中，是天生不支持设置图片居中以及图片显示宽高这些属性的。好在markdown是支持html语法的，因此曲线救国的办法倒是相当多，下面介绍两种实现markdown中图片水平居中的办法，不然写博文时，图片总是靠左显示。

首先，在markdown语法中，插入图片的基本语法是： 

![Alt text](链接 [optional title])

其中，Alt text图片的Alt标签，主要是对图片进行描述，在前端代码中，给img标签添加alt的意义，主要是当图片因为各种原因导致无法显示时，可以用该文字来代替显示，也被用于优化SEO，可以引导搜索引擎根据Alt text的内容来搜索到该图片。而optional title是鼠标悬停在图片区域时显示的标题文字，一般可以忽略。

因此markdown语法插入图片的格式一般是: 

1
2
3
![avatar](/post/img/xxx.png) //插入本地图片
![avatar](https://cdn.jsdeliver.net/xxx.png) //插入网络图片  
![avatar](data:image/png;base64,xxxxx...)  //还可以是base64编码的图片，搞前端的小伙伴应该熟悉

第一种方式，在需要markdown插入图片代码的外层包裹center元素

1
<center>![avatar](https://cdn.jsdeliver.net/xxx.png)</center>

这种方式，在每次插入图片时，都要在外层包裹center元素，较为麻烦，如果平时很少插入图片，可以用这个方法解决。

第二种方式，属于是比较一劳永逸的法子。主要就是修改hexo博客主题中的css样式，来达到图片水平居中效果

因为markdown插入图片的代码，在最终渲染的时候，其实是变为了html中的img元素。因此我们可以直接去博客主题文件的源代码中，找到控制文章内图片显示样式的css代码，将其修改成水平居中即可。前端编程中修改水平居中的方法非常多，这里只介绍一种。
一般情况下，我们可以在hexo博客文件夹进入到主题模板的themes->(主题名称文件夹)->source->css->_partial中，找到post.styl文件，该post文件中保存的就是文章详情页里面的显示样式。然后找到里面正确的img元素，修改其样式，主要是增加’margin 0 auto’这一行代码即可。如下: 

1
2
3
4
5
6
7
8
.post-content
    position relative
    color c-666
    img
      max-width 100%
      cursor pointer
      display block 
      margin 0 auto   //增加这一行即可

这样一来，文章里只要插入图片，就是自动水平居中了。不需要每次手动输入任何代码来居中，一劳永逸。
根据每个人选择的主题模板的差异，这个控制img元素的代码不一定就在post这个名字的文件中，还是需要自己根据线索寻找一下。