css水平垂直居中

/* 公共樣式–start */
{
box-sizing:border-box;
}
body{
padding:50px;
}
.main{ / main是父元素的類名 /
width:400px;
height:400px;
border:1px solid red;
}
.box{ / box是子元素的類名 /
background:green;
color:#fff;
font-size:16px;
padding:10px;
}
.size{ / size用來表示指定寬度 /
width:100px;
height:100px;
}
/ 公共樣式–end */

/* 第一種對齊樣式：absolute + top50% left50% + margin負值 */
.main{
position:relative;
}
.box1{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

連結: link.

圖片:

帶尺寸的圖片:

居中的圖片:

居中並且帶尺寸的圖片:

當然，我們為了讓使用者更加便捷，我們增加了圖片拖拽功能。

如何插入一段漂亮的程式碼片

去部落格設定頁面，選擇一款你喜歡的程式碼片高亮樣式，下面展示同樣高亮的 程式碼片.

// An highlighted block
var foo = 'bar';

生成一個適合你的列表

• 專案
  • 專案
    • 專案

1. 專案1
2. 專案2
3. 專案3

• 計劃任務
• 完成任務

建立一個表格

一個簡單的表格是這麼建立的：

專案	Value
電腦	$1600
手機	$12
導管	$1

設定內容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文字居中	第二列文字居右	第三列文字居左

SmartyPants

SmartyPants將ASCII標點字元轉換為“智慧”印刷標點HTML實體。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

建立一個自定義列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何建立一個註腳

一個具有註腳的文字。¹

註釋也是必不可少的

Markdown將文字轉換為 HTML。

KaTeX數學公式

您可以使用渲染LaTeX數學表示式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通過尤拉積分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多關於的資訊 LaTeX 數學表示式here.

新的甘特圖功能，豐富你的文章

• 關於 甘特圖 語法，參考 這兒,

UML 圖表

可以使用UML圖表進行渲染。 Mermaid. 例如下面產生的一個序列圖：

這將產生一個流程圖。:

• 關於 Mermaid 語法，參考 這兒,

FLowchart流程圖

我們依舊會支援flowchart的流程圖：

• 關於 Flowchart流程圖 語法，參考 這兒.

匯出與匯入

匯出

如果你想嘗試使用此編輯器, 你可以在此篇文章任意編輯。當你完成了一篇文章的寫作, 在上方工具欄找到 文章匯出 ，生成一個.md檔案或者.html檔案進行本地儲存。

匯入

如果你想載入一篇你寫過的.md檔案，在上方工具欄可以選擇匯入功能進行對應副檔名的檔案匯入，
繼續你的創作。

---

1. 註腳的解釋 ↩︎