水平垂直居中以及Codepen

博客支持CodePen的方法

https://www.npmjs.com/package/hexo-codepen

npm i -D hexo-codepen

然后在Markdown中嵌入

{% codepen userId|anonymous|anon slugHash theme [defaultTab [height [width]]] %}

在CodePen编辑器右下角Embed按钮弹开后，复制HTML代码如：

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="html,result" data-user="alphaqiu" data-slug-hash="MWwVzar" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="水平垂直居中/Loading mask">
  <span>See the Pen <a href="https://codepen.io/alphaqiu/pen/MWwVzar">
  水平垂直居中/Loading mask</a> by alphaqiu (<a href="https://codepen.io/alphaqiu">@alphaqiu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

把p🏷️标签里对应的参数填到潜入代码对应位置：

{% codepen alphaqiu MWwVzar dark "result" 500 %}

水平和垂直居中