diff --git a/README.md b/README.md
new file mode 100644
index 0000000..b793318
--- /dev/null
+++ b/README.md
@@ -0,0 +1,10 @@
+# 水平垂直居中
+
+- [lineheight](lineheight.html)
+- [absolute + 负margin](absolute1.html)
+- [absolute + margin auto](absolute2.html)
+- [absolute + calc](absolute3.html)
+- [absolute + transform](absolute4.html)
+- [table](table.html)
+- [css-table](css-table.html)
+- [flex](flex.html)
diff --git a/absolute1.html b/absolute1.html
new file mode 100644
index 0000000..bd4d2e5
--- /dev/null
+++ b/absolute1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>absolute + 负margin</title>
+    <link rel="stylesheet" href="common.css">
+    <style>
+        .wp {
+            position: relative;
+        }
+        .box {
+            position: absolute;;
+            top: 50%;
+            left: 50%;
+            margin-left: -50px;
+            margin-top: -50px;
+        }
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <div class="wp">
+        <div class="box">123123</div>
+    </div>
+</body>
+</html>
diff --git a/absolute2.html b/absolute2.html
new file mode 100644
index 0000000..e5c4751
--- /dev/null
+++ b/absolute2.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>absolute + margin auto</title>
+    <link rel="stylesheet" href="common.css">
+    <style>
+        .wp {
+            position: relative;
+        }
+        .box {
+            position: absolute;;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            margin: auto;
+        }
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <div class="wp">
+        <div class="box">123123</div>
+    </div>
+</body>
+</html>
diff --git a/absolute3.html b/absolute3.html
new file mode 100644
index 0000000..66f1fec
--- /dev/null
+++ b/absolute3.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>absolute + calc</title>
+    <link rel="stylesheet" href="common.css">
+    <style>
+        .wp {
+            position: relative;
+        }
+        .box {
+            position: absolute;;
+            top: calc(50% - 50px);
+            left: calc(50% - 50px);
+        }
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <div class="wp">
+        <div class="box">123123</div>
+    </div>
+</body>
+</html>
diff --git a/absolute4.html b/absolute4.html
new file mode 100644
index 0000000..6575466
--- /dev/null
+++ b/absolute4.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>absolute + transform</title>
+    <link rel="stylesheet" href="common.css">
+    <style>
+        .wp {
+            position: relative;
+        }
+        .box {
+            position: absolute;;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <div class="wp">
+        <div class="box">123123</div>
+    </div>
+</body>
+</html>
diff --git a/common.css b/common.css
new file mode 100644
index 0000000..73203aa
--- /dev/null
+++ b/common.css
@@ -0,0 +1,11 @@
+.wp {
+    border: 1px solid red;
+    width: 300px;
+    height: 300px;
+}
+
+.box {
+    width: 100px;
+    height: 100px;
+    background: green;
+}
diff --git a/css-table.html b/css-table.html
new file mode 100644
index 0000000..eacd74a
--- /dev/null
+++ b/css-table.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>css-table</title>
+    <link rel="stylesheet" href="common.css">
+    <style>
+        .wp {
+            display: table-cell;
+            text-align: center;
+            vertical-align: middle;
+        }
+        .box {
+            display: inline-block;
+        }
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <div class="wp">
+        <div class="box">123123</div>
+    </div>
+</body>
+</html>
diff --git a/flex.html b/flex.html
new file mode 100644
index 0000000..951aaae
--- /dev/null
+++ b/flex.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>flex</title>
+    <link rel="stylesheet" href="common.css">
+    <style>
+        .wp {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .box {
+        }
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <div class="wp">
+        <div class="box">123123</div>
+    </div>
+</body>
+</html>
diff --git a/lineheight.html b/lineheight.html
new file mode 100644
index 0000000..57d3d78
--- /dev/null
+++ b/lineheight.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>lineheight</title>
+    <link rel="stylesheet" href="common.css">
+    <style>
+        .wp {
+            line-height: 300px;
+            text-align: center;
+        }
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <div class="wp">
+        <span class="box">文本文本文本</span>
+    </div>
+</body>
+</html>
diff --git a/table.html b/table.html
new file mode 100644
index 0000000..526c6bd
--- /dev/null
+++ b/table.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>table</title>
+    <link rel="stylesheet" href="common.css">
+    <style>
+        .wp {
+            text-align: center;
+        }
+        .box {
+            display: inline-block;
+        }
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    <table>
+        <tbody>
+            <tr>
+                <td class="wp">
+                    <div class="box">123123</div>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</body>
+</html>
+        
