diff --git a/contents/_includes/patterns/centering.njk b/contents/_includes/patterns/centering.njk
new file mode 100644
index 0000000..487e394
--- /dev/null
+++ b/contents/_includes/patterns/centering.njk
@@ -0,0 +1,4 @@
+<div class="centering">
+    {% circle %}
+    {% lines "hor", 5 %}
+</div>
\ No newline at end of file
diff --git a/contents/centering.md b/contents/centering.md
new file mode 100644
index 0000000..edd37a1
--- /dev/null
+++ b/contents/centering.md
@@ -0,0 +1,28 @@
+---
+layout: layouts/post.njk
+title: Centering
+description: Center an element with CSS flexbox
+keywords: css centering, css flexbox
+---
+
+## HTML
+
+```html
+<div class="centering">
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.centering {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+```
+
+{% demo %}
+{% include "patterns/centering.njk" %}
+{% enddemo %}
diff --git a/contents/index.njk b/contents/index.njk
index e981888..353cee5 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -43,6 +43,12 @@ eleventyExcludeFromCollections: true
                     <div class="card__title">Badge</div>
                 </a>
             </div>
+            <div class="card__item">
+                <a class="card__link" href="/centering/">
+                    <div class="card__cover">{% include "patterns/centering.njk" %}</div>
+                    <div class="card__title">Centering</div>
+                </a>
+            </div>
         </div>
     </div>
 
diff --git a/pages/centering/index.tsx b/pages/centering/index.tsx
deleted file mode 100644
index 9f98624..0000000
--- a/pages/centering/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.Centering}>
-            <Head>
-                <meta name="description" content="Center an element with CSS flexbox" />
-                <meta name="og:description" content="Center an element with CSS flexbox" />
-                <meta name="twitter:description" content="Center an element with CSS flexbox" />
-                <meta name="keywords" content="css centering, css flexbox" />
-            </Head>
-            <BrowserFrame
-                html={`
-<div class="container">
-    ...
-</div>
-`}
-                css={`
-                    .container {
-                        align-items: center;
-                        display: flex;
-                        justify-content: center;
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <Circle size={64} />
-                    <div style={{ marginTop: '16px', width: '40%' }}>
-                        <Rectangle />
-                    </div>
-                    <div style={{ marginTop: '8px', width: '30%' }}>
-                        <Rectangle />
-                    </div>
-                    <div style={{ marginTop: '8px', width: '20%' }}>
-                        <Rectangle />
-                    </div>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/centering/Cover.tsx b/patterns/centering/Cover.tsx
deleted file mode 100644
index 220f727..0000000
--- a/patterns/centering/Cover.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
- * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
- */
-
-import * as React from 'react';
-
-import Circle from '../../placeholders/Circle';
-import Frame from '../../placeholders/Frame';
-import Line from '../../placeholders/Line';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '8px',
-                }}
-            >
-                <Circle />
-                <div style={{ margin: '4px 0', width: '50%' }}>
-                    <Line />
-                </div>
-                <div style={{ margin: '4px 0', width: '40%' }}>
-                    <Line />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 14df02b..b5274e9 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -16,6 +16,7 @@
 @import './patterns/avatar';
 @import './patterns/avatar-list';
 @import './patterns/badge';
+@import './patterns/centering';
 
 // Placeholders
 @import './placeholders/circle';
diff --git a/styles/patterns/_centering.scss b/styles/patterns/_centering.scss
new file mode 100644
index 0000000..e7cb5b3
--- /dev/null
+++ b/styles/patterns/_centering.scss
@@ -0,0 +1,9 @@
+.centering {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Demo */
+    flex-direction: column;
+    width: 6rem;
+}
\ No newline at end of file
diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss
index d5430bc..916dc46 100644
--- a/styles/placeholders/_line.scss
+++ b/styles/placeholders/_line.scss
@@ -9,6 +9,11 @@
     height: 100%;
     width: 1px;
 }
+
+.lines {
+    margin: 0.5rem 0;
+    width: 100%;
+}
 .lines .line {
     margin-bottom: 0.25rem;
 }
\ No newline at end of file
